Bootstrap Пагинация и сортировка таблиц данных

Question

Я использую таблицы данных и bootstrap для разбивки на страницы, но это не работает.

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

html для самой таблицы

        <table id="tablePersonnel"
            class="table table-striped table-bordered table-sm" cellspacing="0"
            width="100%">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Name</th>
                    <th>First Name</th>
                    <th>Phone number</th>
                    <th>Status</th>
                    <th>Edit</th>
                    <th>Delete</th>

                </tr>
            </thead>
            <tfoot>
                <tr>
                    <th>#</th>
                    <th>Name</th>
                    <th>First Name</th>
                    <th>Phone number</th>
                    <th>Status</th>
                    <th>Edit</th>
                    <th>Delete</th>
                </tr>
            </tfoot>
            
        </table>

вот javascript для функции, ответственной для получения данных

refreshTable = function() {
    $
            .ajax({
                url : "listPersonnel",
                dataType : 'json',
                success : function(response) {
                    data = response;
                    var no = 1;
                    for (i = 0; i < data.length; i++) {
                        $("#tablePersonnel")
                                .append(
                                        '<tr> <td>'
                                                + data[i].id
                                                + '</td> <td>'
                                                + data[i].firstname
                                                + '</td> <td>'
                                                + data[i].name
                                                + '</td> <td>'
                                                + data[i].phone
                                                + '</td> <td>'
                                                + data[i].status
                                                + '</td><td><input type="button" class="btn1" onclick="openEditPopup('
                                                + i
                                                + ')" value="Edit"></input></td> <td> <button type="submit" class="btn" onclick="openDeletePopup('
                                                + i
                                                + ');" value=""><i class="fa fa-trash"></i></button></td> </tr>');
                        no = no + 1;
                    }
                
                    
                }
            });
}

Любая помощь приветствуется.

Answer 1

Ваш подход включает добавление данных в таблицу HTML (т.е. в DOM). Однако объект DataTables не знает об этих данных, поэтому данные исчезают всякий раз, когда вы выполняете какое-либо действие, включающее ссылку DataTables sh. DataTables показывает вам свои данные, а это не данные.

Вместо этого вы можете выполнить вызов ajax из самого DataTables - и тогда DataTables обработает данные за вас.

I будет предполагать, что JSON, возвращаемый вашим вызовом ajax, имеет следующую структуру:

[
  {
    "id": 123,
    "firstname": "Tom",
    "name": "Smith",
    "phone": "121-212-1212",
    "status": "foo"
  },
  {
    "id": 123,
    "firstname": "Jane",
    "name": "Jones",
    "phone": "434-545=6767",
    "status": "bar"
  }
]

В этом случае вы можете использовать следующую таблицу HTML:

<table id="example">
    <thead>
        <tr>
            <th>ID</th>
            <th>First Name</th>
            <th>Name</th>
            <th>Phone</th>
            <th>Status</th>
            <th>Action</th>
        </tr>
    </thead>
</table>

И ваша конфигурация DataTable будет такой:

<script type="text/javascript">

  $(document).ready(function() {
    $('#example').DataTable( {
      "ajax": { 
        "url": "listPersonnel",
        "dataSrc": ''
      },
      "columns": [
        { "data": "id" },
        { "data": "firstname" },
        { "data": "name" },
        { "data": "phone" },
        { "data": "status" },
        { "data": function ( row, type, val, meta ) {
          var content = '<input type="button" class="btn1" onclick="openEditPopup('
              + row.id
              + ')" value="Edit"></input></td> <td> <button type="submit" class="btn" onclick="openDeletePopup('
              + row.id
              + ');" value=""><i class="fa fa-trash">trash</i></button>'
          return content;
        } }
      ]

    } );

  } );

</script>

Результат выглядит следующим образом (у меня нет вашего значка tra sh):

Points to note:

There is no iteration logic here - it's handled for you by DataTables, as it consumes your JSON response.

If your JSON has a different structure, you will need to adjust the above. Examples of different approaches are shown здесь .

В вашем случае мы используем dataSrc = '', потому что ваш JSON представляет собой массив объектов - и у него нет объекта-контейнера.

Данные в последнем столбце генерируется с помощью функции, которая создает нужную вам строку.

Вы также можете определить заголовки столбцов непосредственно в DataTable, а не в HTML.

Есть много вариантов этого подхода - DataTables обладает большой гибкостью.