Jquery - Bootstrap DataTable Refre sh выпуск DATA - PullRequest
Новая
       10

Jquery - Bootstrap DataTable Refre sh выпуск DATA

0 голосов
/ 05 апреля 2020

Не могли бы вы помочь мне с этой проблемой, связанной с Bootstrap - Jquery Таблица?

Я хотел бы получить данные с сервера базы данных в формате JSON (через вызов ajax ) в bootstrap DataTable и затем перезагрузите только DataTable.

Вот код, который будет запущен после нажатия кнопки (поиск): 

var prova = null;

$(document).ready(function(){
        prova = $('#prova_table').DataTable({
            paging: true,
            searching: false
        });
        prendivalori();
       });  


function prendivalori() {
       $("#bottone").click(function() {
        $("#prova_table").empty();
        var sopravvissuti = $('#sopravvissuti').val();
        var vita = $('#vita').val();
        var provincia = $('#provincia').val();
        var campi = $('#campi').val();
        var table = $('#prova_table');

        $.ajax({
                type: 'GET',
                url: './php/select.php',
                data: {'sopravvissuti': sopravvissuti, 'vita': vita, 'provincia':provincia, 'campi':campi},
                dataType: 'json',
                success: function(data) {
                                    table.append("<thead><tr><th class='th-sm'>Cognome</th><th class='th-sm'>Nome</th><th class='th-sm'>Sesso</th></tr></thead>");
                                    console.log(data);
                                    len=data[0].length;
                                    table.append("<tbody>");
                        for(i=0; i< len; i++){

                            temp=data[0][i]
                            table.append("<tr><td>" + temp[1] + "</td><td>" + temp[0] + "</td><td>" 
                            + temp[2] +"</td></tr>");
                        }
                                                table.append("</tbody>");

                                                $('#prova_table').DataTable().ajax.reload();

                        }

                ,
                error: function(data) {
                        alert('Assicurarsi di aver selezionato tutte le caselle');

                }
        });

    });
};

Здесь вы это сообщение об ошибке, полученное после нажатия кнопки данных ...

Предупреждение DataTables: таблица id = prova_table - неверный JSON ответ. Для получения дополнительной информации об этой ошибке см. http://datatables.net/tn/1

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

Я использую все обновленные ссылки для запуска сайта ..

ET C ECT

Вот вам ответ JSON:

JSON Response

Заранее большое спасибо за поддержку, желаю вам хорошего дня Андреа

1 Ответ

1 голос
/ 05 апреля 2020

Вы не должны делать table.append () и любые другие прямые изменения таблицы. Jquery Таблица данных сделает это за вас, если вы правильно передадите ей параметры.

Сделайте это так.

Сначала инициализируйте таблицу данных, как показано ниже, с именами столбцов, если они доступны 

var table = $("#myTable").DataTable({
    data:[],
    columns: [
                { "data": "Cognome"  },
                { "data": "Nome" },
                { "data": "Sesso" },
                { "data": "data di nascita" }
    ],        
});

Нажмите на кнопку, выполните вызов get ajax, а при завершении callback очистите таблицу table.clear().draw(); и table.rows.add(result).draw(), чтобы отобразить данные в таблицу. 

    $.ajax({
            url: "https://www.mocky.io/v2/5e89289e3100005600d39c17",
            type: "get",
        }).done(function (result) {
            table.clear().draw();
            table.rows.add(result).draw();
         })

JSFiddle: https://jsfiddle.net/k0d1mzgL/

var table = $("#myTable").DataTable({
    data:[],
    columns: [
           { "data": "Cognome" ,"title": "Cognome"},
{ "data": "Nome" ,"title": "Nome"},
{ "data": "Sesso" ,"title": "Sesso"},
{ "data": "data di nascita","title": "data di nascita" }
    ],        
});
$("#getDataBtn").click(function(){
    $.ajax({
            url: "https://www.mocky.io/v2/5e89289e3100005600d39c17",
            type: "get",
        }).done(function (result) {
            table.clear().draw();
            table.rows.add(result).draw();
            }).fail(function (jqXHR, textStatus, errorThrown) { 
               //if failed
               console.log("Due to https issue,this request cant be made, go check jsfiddle link provided in answer");
            });
});
<link href="//cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" rel="stylesheet" >
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<table id="myTable">

</table>
<button id="getDataBtn">Get data</button>
...