Передача значений в функцию onclick внутри таблицы Datatables - PullRequest
Новая
       15

Передача значений в функцию onclick внутри таблицы Datatables

1 голос
/ 04 марта 2020

У меня есть таблица на моей странице, завернутая в Datatables. Данные прекрасно извлекаются из файла php, и с кодом в этой части проблем нет. Однако у меня проблема с кнопками внутри стола. Ниже приведены столбцы в моей таблице Datatables: 

columns: [
            {"data": "id"},
            {"data": "name"},
            {data: null, render: function(data, type, row) {
                    return '<a href="#" onclick="" class="buttons edit-button"><span class="fa fa-pen"></span></a>'
                }},
        ],

Как вы можете видеть, я определил три столбца, первый из которых 'id', второй 'name' и третий столбец, включающий кнопка. Моя проблема связана с этой кнопкой. На самом деле, я хочу вызывать функцию, например, edit () всякий раз, когда нажимается эта кнопка. Функция edit () получает значение name (второй столбец) в качестве параметра. Теперь вопрос в следующем: как я могу передать значение второго столбца в функцию edit () при нажатии кнопки; в результате вызов onClick третьего столбца должен выглядеть примерно так: onclick = "edit (name.val)" ... я оставил этот onClick = "" пустым, потому что я не знаю, как это сделать .

Заранее благодарны.

Ответы [ 2 ]

1 голос
/ 04 марта 2020

Проработав пару часов с проблемой, я узнал, что с помощью простой конкатенации javascript проблема может быть решена.

Ранее блок был похож на следующее: 

<a href="#" onclick="" class="buttons edit-button"><span class="fa fa-pen"></span></a>

и у меня были проблемы с вызовом onclick, когда я не мог передать параметр для функций. Чтобы решить проблему, я немного изменил блок и использовал конкатенацию, и вуаля, проблема исчезла. Это должно превратиться в 

return '<a href="#" onclick="edit(' + data.name +')" class="buttons edit-button"><span class="fa fa-times-circle"></span></a>'
0 голосов
/ 04 марта 2020

Вот рабочий пример. Он использует функцию data , описанную на этой странице. Соответствующая часть такова: 

{ "data": function ( row, type, val, meta ) {
    return "the data in column 1 is '" + row[0] + "'";
  } 
}

В таблице с тремя столбцами (ниже) третий столбец заполняется на основе данных из первого столбца.

Вот полный пример - вы должны быть в состоянии приспособить эту технику к вашей ситуации: 

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Animals</title>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
  <link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">
</head>

<body>

<div style="margin: 20px;">

<table id="animals" class="display dataTable cell-border" style="width:100%">
  <thead>
   <tr><th>Animal</th><th>Collective Noun</th><th>Customized Data</th></tr>
  </thead>
  <tbody>
    <tr><td>antelopes</td><td>herd</td><td></td></tr>
    <tr><td>elephants</td><td>herd</td><td></td></tr>
    <tr><td>hounds</td><td>pack</td><td></td></tr>
    <tr><td>kittens</td><td>kindle</td><td></td></tr>
    <tr><td>lions</td><td>pride</td><td></td></tr>
    <tr><td>ravens</td><td>unkindness</td><td></td></tr>
    <tr><td>whales</td><td>pod</td><td></td></tr>
    <tr><td>zebras</td><td>herd</td><td></td></tr>
  </tbody>
</table>

</div>

<script type="text/javascript">

  $(document).ready(function() {
    var table = $('#animals').DataTable({
      "columns": [
        null,
        null,
        { "data": function ( row, type, val, meta ) {
            //console.log(row);
            //console.log(type);
            //console.log(val);
            //console.log(meta);
            return "the data in column 1 is '" + row[0] + "'";
          } 
        }
      ]
    });

  });
</script>

</body>

(Закомментированные) операторы ведения журнала консоли есть, чтобы вы могли более внимательно посмотреть, как работает функция, если вы будете sh.

...