Як перезавантажити / оновити таблицю даних jQuery?


88

Я намагаюся реалізувати функціональність, завдяки якій натискання кнопки на екрані призведе до оновлення моєї jQuery dataTable (оскільки джерело даних на стороні сервера могло змінитися з моменту створення dataTable).

Ось що я маю:

$(document).ready(function() {
    $("#my-button").click(function() {
        $("#my-datatable").dataTable().fnReloadAjax();
    });
});

Але коли я запускаю це, це нічого не робить. Який правильний спосіб оновити таблицю даних, коли натискається кнопка? Спасибі заздалегідь!


Чи виникають у вас помилки Javascript? Зверніться до Firebug / Chrome Inspector, можливо, додайте ще якийсь код (код таблиці та кнопки, тобто)
Герт,

Відповіді:


32

Ви можете спробувати наступне:

function InitOverviewDataTable() {
    oOverviewTable = $('#HelpdeskOverview').dataTable({
        "bPaginate": true,
        "bJQueryUI": true, // ThemeRoller-stöd
        "bLengthChange": false,
        "bFilter": false,
        "bSort": false,
        "bInfo": true,
        "bAutoWidth": true,
        "bProcessing": true,
        "iDisplayLength": 10,
        "sAjaxSource": '/Helpdesk/ActiveCases/noacceptancetest'
    });
}

function RefreshTable(tableId, urlData) {
    $.getJSON(urlData, null, function(json) {
        table = $(tableId).dataTable();
        oSettings = table.fnSettings();

        table.fnClearTable(this);

        for (var i = 0; i < json.aaData.length; i++) {
            table.oApi._fnAddData(oSettings, json.aaData[i]);
        }

        oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
        table.fnDraw();
    });
}
// Edited by Prasad
function AutoReload() {
    RefreshTable('#HelpdeskOverview', '/Helpdesk/ActiveCases/noacceptancetest');

    setTimeout(function() {
        AutoReload();
    }, 30000);
}

$(document).ready(function() {
    InitOverviewDataTable();
    setTimeout(function() {
        AutoReload();
    }, 30000);
});

http://www.meadow.se/wordpress/?p=536


Це чудово! Але я виявив, що ви дзвоните на _fnAddData, що передбачається лише як приватна функція. Це ризиковано? Скажімо, в майбутньому підпис функції може бути змінений.
Рой Лінг,

134

У версії 1.10.0 DataTables він вбудований і простий:

var table = $('#example').DataTable();
table.ajax.reload();

або просто

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

http://datatables.net/reference/api/ajax.reload ()


20
Будьте обережні і використовуйте, $('#example').DataTable()а ні $('#example').dataTable().
Сергій

Після цього я не можу отримати доступ до вмісту таблиці даних. Потім сказано, що я маю лише 2 TR (один із заголовками, а другий - лише 1 клітинка, що відображає дані). Чи потрібно його перемальовувати спочатку?
Джон Кетер,

Джон Кетер: неможливо відповісти на ваше запитання, не побачивши вашого коду. Будь ласка, опублікуйте як нове запитання разом із кодом, щоб дозволити відтворення проблеми.
atmelino

Це може спричинити помилку cannot reinitialise datatable jquery. Це трапляється тому, що tableініціюється знову і знову для кожного входу в таблицю. Щоб цього уникнути, переконайтеся, що ініціалізуєте table лише один раз.
Шубхем А.

4
Для збереження інформації про підкачки використовуйте. table.ajax.reload (null, false), як згадується в офіційній документації тут datatables.net/reference/api/ajax.reload ()
Srinivas Rathikrindi

27

Ви можете використовувати розширений API DataTable, щоб перезавантажити його ajax.reload()

Якщо ви оголосите свою таблицю даних як DataTable()(нову версію), вам потрібно:

var oTable = $('#filtertable_data').DataTable( );
// to reload
oTable.ajax.reload();

Якщо ви оголосите свою таблицю даних як dataTable()(стару версію), вам потрібно:

var oTable = $('#filtertable_data').dataTable( );
// to reload
oTable.api().ajax.reload();

27

Спочатку знистіть таблицю даних, а потім намалюйте таблицю даних.

$('#table1').DataTable().destroy();
$('#table1').find('tbody').append("<tr><td><value1></td><td><value1></td></tr>");
$('#table1').DataTable().draw();

Чому все так складно?
Акмаль

Дякую. Це єдина відповідь, яка насправді працює.
Черін

24

У мене була та сама проблема, ось як я її виправив:

спочатку отримайте дані за вибраним вами методом, я використовую ajax після подання результатів, які внесуть зміни до таблиці. Потім очистіть і додайте нові дані:

var refreshedDataFromTheServer = getDataFromServer();

var myTable = $('#tableId').DataTable();
myTable.clear().rows.add(refreshedDataFromTheServer).draw();

ось джерело: https://datatables.net/reference/api/clear ()


1
Нарешті, відповідь, що не відповідає Ajax!
Фабіо Вентурі Пастор

це fnServerData: getDataFromServer?
DEREK LEE,

Єдина відповідь, яка працювала для мене, використовуючи простий об’єкт JS як дані. Дякую!
Банзі,

13
var ref = $('#example').DataTable();
ref.ajax.reload();

Якщо ви хочете додати кнопку перезавантаження / оновлення до DataTables 1.10, використовуйте drawCallback .

Див. Приклад нижче (я використовую таблиці даних з bootstrap css)

var ref= $('#hldy_tbl').DataTable({
        "responsive": true,
        "processing":true,
        "serverSide":true,
        "ajax":{
            "url":"get_hotels.php",
            "type":"POST"
        },
        "drawCallback": function( settings ) {
            $('<li><a onclick="refresh_tab()" class="fa fa-refresh"></a></li>').prependTo('div.dataTables_paginate ul.pagination');
        }
    });

function refresh_tab(){
    ref.ajax.reload();
}


10

я б рекомендував використовувати наступний код.

table.ajax.reload(null, false); 

Причиною цього є те, що користувальницькі сторінки не перезавантажуються при перезавантаженні.
Приклад:

<button id='refresh'> Refresh </button>

<script>
    $(document).ready(function() {

        table = $("#my-datatable").DataTable();
        $("#refresh").on("click", function () { 
         table.ajax.reload(null, false); 
        });

   });
</script>

подробиці про це можна знайти тут


Правильно. Якщо не змінити номер сторінки після таблиці оновлення
Мантан Патель

дорівнюєtable.ajax.reload();
CodeToLife

Так, це дорівнює вищезазначеному, але ви втрачаєте суть. table.ajax.reload (); оновить і скине таблицю, якщо ваша на 5 сторінці, і ви її оновите. це поверне вас на першу сторінку.
Ad Kahn,

3

Ось як я це роблю ... Можливо, не найкращим чином, але це, безумовно, простіше (IMHO) і не вимагає додаткових плагінів.

HTML

<div id="my-datatable"></div>

jQuery

function LoadData() {
    var myDataTable = $("#my-datatable").html("<table><thead></thead><tbody></tbody></table>");
    $("table",myDataTable).dataTable({...});
}
$(document).ready(function() {
    $("#my-button").click(LoadData);
    LoadData();
});

Примітка: У моїй роботі з jQuery dataTable, іноді якщо у вас її немає, <thead></thead><tbody></tbody>вона не працює. Але ви могли б пройти і без цього. Я точно не зрозумів, що робить це необхідним, а що ні.


3

Спробуйте спочатку знищити таблицю даних, а потім встановити її знову, приклад

var table;
$(document).ready(function() {
    table = $("#my-datatable").datatable()
    $("#my-button").click(function() {
        table.fnDestroy();
        table = $("#my-datatable").dataTable();
    });
});

3

Якщо ви використовуєте атрибут url, просто зробіть

table.ajax.reload()

Сподіваюся, це комусь допоможе


3

Використовуйте цей код, коли ви хочете оновити таблицю даних:

 $("#my-button").click(function() {
    $('#my-datatable').DataTable().clear().draw();
 });

2

ну, ви не показали, як / де ви завантажуєте сценарії, але, щоб використовувати функції плагіна API, ви повинні включити його на свою сторінку після завантаження бібліотеки DataTables, але перед ініціалізацією DataTable.

подобається це

<script type="text/javascript" src="jquery.dataTables.js"></script>
<script type="text/javascript" src="dataTables.fnReloadAjax.js"></script>

1

DataTables Аллана Джардіна - це дуже потужний і витончений плагін jQuery для відображення табличних даних. Він має безліч функцій і може виконати більшість із того, що вам може знадобитися. Одне, що цікаво складно, це те, як оновити вміст простим способом, тому я для власного довідки, а можливо й для інших, ось повний приклад одного способу, якщо це зробити:

HTML

<table id="HelpdeskOverview">
  <thead>
    <tr>
      <th>Ärende</th>
      <th>Rapporterad</th>
      <th>Syst/Utr/Appl</th>
      <th>Prio</th>
      <th>Rubrik</th>
      <th>Status</th>
      <th>Ägare</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

Javascript

function InitOverviewDataTable()
{
  oOverviewTable =$('#HelpdeskOverview').dataTable(
  {
    "bPaginate": true,
    "bJQueryUI": true,  // ThemeRoller-stöd
    "bLengthChange": false,
    "bFilter": false,
    "bSort": false,
    "bInfo": true,
    "bAutoWidth": true,
    "bProcessing": true,
    "iDisplayLength": 10,
    "sAjaxSource": '/Helpdesk/ActiveCases/noacceptancetest'
  });
}

function RefreshTable(tableId, urlData)
{
  $.getJSON(urlData, null, function( json )
  {
    table = $(tableId).dataTable();
    oSettings = table.fnSettings();

    table.fnClearTable(this);

    for (var i=0; i<json.aaData.length; i++)
    {
      table.oApi._fnAddData(oSettings, json.aaData[i]);
    }

    oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
    table.fnDraw();
  });
}

function AutoReload()
{
  RefreshTable('#HelpdeskOverview', '/Helpdesk/ActiveCases/noacceptancetest');

  setTimeout(function(){AutoReload();}, 30000);
}

$(document).ready(function () {
  InitOverviewDataTable();
  setTimeout(function(){AutoReload();}, 30000);
});

Джерело


1

var myTable = $ ('# tblIdName'). DataTable (); myTable.clear (). row.add (myTable.data) .draw ();

Це працювало для мене, не використовуючи ajax.


0
        if(data.length==0){
            alert("empty");
              $('#MembershipTable > tbody').empty();
            // $('#MembershipTable').dataTable().fnDestroy();
                    $('#MembershipTable_info').empty(); 
                    $("#MembershipTable_length").empty();
                    $("#MembershipTable_paginate").empty();

             html="<tr><td colspan='20'><b>No data available in Table</b> </td></tr>";
           $("#MembershipTable").append(html);
        }

        else{
             $('#MembershipTable').dataTable().fnDestroy();
            $('#MembershipTable > tbody').empty();

         for(var i=0; i<data.length; i++){
            //

.......}


0

Згідно з довідкою DataTable , я міг зробити для свого столу.

Я хочу, щоб декілька баз даних мій DataTable.

Наприклад: data_1.json> 2500 записів - data_2.json> 300 записів - data_3.json> 10265 записів

var table;
var isTableCreated= false;

if (isTableCreated==true) {
    table.destroy();
    $('#Table').empty(); // empty in case the columns change
}
else
    i++;

table = $('#Table').DataTable({
        "processing": true,
        "serverSide": true,
        "ordering": false,
        "searching": false,
        "ajax": {
            "url": 'url',
            "type": "POST",
            "draw": 1,
            "data": function (data) {
                data.pageNumber = (data.start / data.length);
            },
            "dataFilter": function (data) {
                return JSON.stringify(data);
            },
            "dataSrc": function (data) {
                if (data.length > 0) {
                    data.recordsTotal = data[0].result_count;
                    data.recordsFiltered = data[0].result_count;
                    return data;
                }
                else
                    return "";
            },

            "error": function (xhr, error, thrown) {
                alert(thrown.message)
            }
        },
        columns: [
           { data: 'column_1' },
           { data: 'column_2' },
           { data: 'column_3' },
           { data: 'column_4' },
           { data: 'column_5' }
        ]
    });

0

якщо ви використовуєте datatable v1.10.12, то просто викликаєте .draw()метод і передаєте необхідні типи малювання, тобтоfull-reset , pageто ви будете повторно звернути ваш ЮТ з новими даними

let dt = $("#my-datatable").datatable()

// зробити якусь дію

dt.draw('full-reset')

для отримання додаткової інформації перегляньте документи, що містять дані


0

Я зробив щось, що стосується цього ... Нижче наведено зразок javascript із тим, що вам потрібно. Про це є демонстрація тут: http://codersfolder.com/2016/07/crud-with-php-mysqli-bootstrap-datatables-jquery-plugin/

//global the manage member table 
var manageMemberTable;

function updateMember(id = null) {
    if(id) {
        // click on update button
        $("#updatebutton").unbind('click').bind('click', function() {
            $.ajax({
                url: 'webdesign_action/update.php',
                type: 'post',
                data: {member_id : id},
                dataType: 'json',
                success:function(response) {
                    if(response.success == true) {                      
                        $(".removeMessages").html('<div class="alert alert-success alert-dismissible" role="alert">'+
                              '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>'+
                              '<strong> <span class="glyphicon glyphicon-ok-sign"></span> </strong>'+response.messages+
                            '</div>');

                        // refresh the table

                        manageMemberTable.ajax.reload();

                        // close the modal
                        $("#updateModal").modal('hide');

                    } else {
                        $(".removeMessages").html('<div class="alert alert-warning alert-dismissible" role="alert">'+
                              '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>'+
                              '<strong> <span class="glyphicon glyphicon-exclamation-sign"></span> </strong>'+response.messages+
                            '</div>');

                        // refresh the table                        
                        manageMemberTable.ajax.reload();

                        // close the modal
                        $("#updateModal").modal('hide');
                    }
                }
            });
        }); // click remove btn
    } else {
        alert('Error: Refresh the page again');
    }
}

0

вам доведеться написати цей рядок коду після виконання операції оновлення.

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




-6

повторно ініціалізувати таблицю даних за допомогою init та отримати запис як справжній .. виконано .. так просто

напр.

TableAjax.init();
retrieve: true,
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.