JQuery.datatable —— ajax.reload() 无刷新初始化表格

JQuery.datatable —— ajax.reload() 无刷新初始化表格

前言

记录一下JQuery.datatable无刷新多种初始化表格的使用方式。
ajax.reload( callback, resetPaging )

参数描述
callback - function JS当服务器返回数据并重绘完毕时执行此回调方法,回调方法返回的是服务器返回的数据
resetPaging - boolean JS重置(默认或者设置为true)或者保持分页信息(设置为false)

示例

每30秒重新加载表数据(分页重置)

var table = $('#example').DataTable( {
	// 后台地址,响应一个json格式数据
	ajax: "data.json"
});

// 设置定时,每30s执行一次
setInterval( function () {
    table.ajax.reload();
}, 30000 );

每30秒重新加载表数据(分页留存)

var table = $('#example').DataTable( {
    ajax: "data.json"
} );
 
 // 设置定时,每30s执行一次
setInterval( function () {
	// 刷新表格数据,分页信息不会重置
    table.ajax.reload( null, false ); 
}, 30000 );

使用回调函数来更新外部元素

var table = $('#example').DataTable();
 
 // 调用表格ajax行为,获得json并赋值给页面myInput
table.ajax.reload( function ( json ) {
    // 这里的json返回的是服务器的数据
    $('#myInput').val( json.lastInput );
} );
已标记关键词 清除标记
<div class="post-text" itemprop="text"> <p>I'm new in Jquery I want that once the user deletes an item(row) of table on click on "Supprimer" button I will delete it on data base the table reloads automatically without this deleted line. To do I used jQuery with DataTables:</p> <p>What is going on is once I click on "Ajouter" but it shows me this alert:</p> <blockquote> <p>DataTables warning: table id=tablebqup - Invalid JSON response. For more information about this error, please see <a href="http://datatables.net/tn/1" rel="nofollow noreferrer">http://datatables.net/tn/1</a></p> </blockquote> <p>I checked my database it was deleted but the table failed to load.</p> <p>I checked my Console and I found that :</p> <pre><code>Uncaught TypeError: Cannot set property 'data' of null at sa (datatables.min.js:48) at Sb (datatables.min.js:119) at s.<anonymous> (datatables.min.js:120) at s.iterator (datatables.min.js:111) at s.<anonymous> (datatables.min.js:120) at Object.reload (datatables.min.js:114) at Object.success (updtbq.js:69) at i (jquery-3.2.1.min.js:2) at Object.fireWith [as resolveWith] (jquery-3.2.1.min.js:2) at A (jquery-3.2.1.min.js:4) sa @ datatables.min.js:48 Sb @ datatables.min.js:119 (anonymous) @ datatables.min.js:120 iterator @ datatables.min.js:111 (anonymous) @ datatables.min.js:120 (anonymous) @ datatables.min.js:114 (anonymous) @ updtbq.js:69 i @ jquery-3.2.1.min.js:2 fireWith @ jquery-3.2.1.min.js:2 A @ jquery-3.2.1.min.js:4 (anonymous) @ jquery-3.2.1.min.js:4 XMLHttpRequest.send (async) send @ jquery-3.2.1.min.js:4 ajax @ jquery-3.2.1.min.js:4 r.(anonymous function) @ jquery-3.2.1.min.js:4 (anonymous) @ updtbq.js:58 dispatch @ jquery-3.2.1.min.js:3 q.handle @ jquery-3.2.1.min.js:3 </code></pre> <p>I searched for the error and I found that DataTables by default, expects the data loaded to be valid JSON I have done some modification on my code but I failed to fix the error. Please can some one help for that.</p> <p>Here is my php file:</p> <pre><code><?php require_once("C:/wamp/www/Mini_Prj/controllers/mainController.php"); $bnqs=MainController::getBanque(); echo' <thead> <tr> <th style="display:none;">Id Banque</th> <th>Nom de la banque</th> <th>Abrev </th> <th>Siège Sociale</th> <th>Tel</th> <th>Fax</th> <th>Modifier</th> <th>Supprimer</th> </tr> </thead> <tbody> <form method="post"> '; $i=0; foreach ($bnqs as $bnq) { if($bnq['supr']!=1) { echo " <tr> <td style='display:none;'>".$bnq['idbc']."</td> <td contenteditable='true'>".$bnq['nomb']."</td> <td contenteditable='true'>".$bnq['abrvb']."</td> <td contenteditable='true'>".$bnq['sigsocial']."</td> <td contenteditable='true'>".$bnq['tel']."</td> <td contenteditable='true'>".$bnq['fax']."</td> <td> <button id='modif$i' class='btn btn-info modif' name='button'>Modifier</button> </td> <td> <button id='supp$i' class='btn btn-info supp' name='button'>Supprimer</button> </td> </tr>"; $i++; } } echo' </form> </tbody> '; </code></pre> <p>here is my jS file :</p> <pre><code>var basUrl="http://localhost/Mini_Prj/"; $(document).ready(function(e){ $('#tablebqup').dataTable(); .... $(".supp").click(function () { $choix=confirm("voulez vous vraiment sauvegarder les modifications"); if ($choix) { var id=($(this).parent().parent().find('td:eq(0)').html());// the value in the 1st column. var nombc=($(this).parent().parent().find('td:eq(1)').html()); var abrv= ($(this).parent().parent().find('td:eq(2)').html()); var sigsoc=($(this).parent().parent().find('td:eq(3)').html()); var telf=($(this).parent().parent().find('td:eq(4)').html()); var fx=($(this).parent().parent().find('td:eq(5)').html()); console.log(id); $.post(basUrl+'views/component/updtbq.php', { action:'sup_bq', idbc:id, nomb:nombc, abrvb:abrv, sigsocial:sigsoc, tel:telf, fax:fx, }, function(data) { $("#tablebqup").DataTable().ajax.reload();//Here is my problem }); } }); ... </code></pre> <p>and here is the generated Html:</p> <pre><code><div class="updBanque"> <div> <h3> Mise a jours des banques</h3> <div > <div class="table-responsive"> <table id="tablebqup" class="tableau table table-fixed table-bordered table-dark table-hover "> <?php include './component/tbbanqueupd.php'; ?> </table> <form method="post"> <button type="button" class="btn btn-info" name="button" id="newbq" >Nouvelle banque</button> </form> </div> </div> </div> </div> </code></pre> <p>Here is the response:</p> <pre><code> <thead> <tr> <th style="display:none;">Id Banque</th> <th>Nom de la banque</th> <th>Abrev </th> <th>Siège Sociale</th> <th>Tel</th> <th>Fax</th> <th>Modifier</th> <th>Supprimer</th> </tr> </thead> <tbody> <form method="post"> <tr> <td style='display:none;'>4</td> <td contenteditable='true'>BANQUE DE DÉVELOPPEMENT LOCAL</td> <td contenteditable='true'>BDL</td> <td contenteditable='true'>5, rue Gaci Amar, Staoueli, Alger</td> <td contenteditable='true'>021 39 34 83– 033 52 15</td> <td contenteditable='true'>021 39 37 53</td> <td> <button id='modif0' class='btn btn-info modif' name='button'>Modifier</button> </td> <td> <button id='supp0' class='btn btn-info supp' name='button'>Supprimer</button> </td> </tr> <tr> <td style='display:none;'>2</td> <td contenteditable='true'>BANQUE DE L’AGRICULTURE ET DU DÉVELOPPEMENT RURAL</td> <td contenteditable='true'>BADR</td> <td contenteditable='true'>17, Boulevard Colonel Amirouche, Alger</td> <td contenteditable='true'>021 64 24 77– 63 38 78</td> <td contenteditable='true'>021 63 51 46 / 64 34 44</td> <td> <button id='modif1' class='btn btn-info modif' name='button'>Modifier</button> </td> <td> <button id='supp1' class='btn btn-info supp' name='button'>Supprimer</button> </td> </tr> <tr> <td style='display:none;'>1</td> <td contenteditable='true'>BANQUE EXTÉRIEURE D’ALGÉRIE</td> <td contenteditable='true'>BEA</td> <td contenteditable='true'>48, Rue des Frères Bouadou, Bir Mourad Raïs – Alger</td> <td contenteditable='true'>023 83 54 79</td> <td contenteditable='true'>021 56 30 50 / 056 51 56</td> <td> <button id='modif2' class='btn btn-info modif' name='button'>Modifier</button> </td> <td> <button id='supp2' class='btn btn-info supp' name='button'>Supprimer</button> </td> </tr> <tr> <td style='display:none;'>3</td> <td contenteditable='true'>BANQUE NATIONALE D’ALGÉRIE</td> <td contenteditable='true'>BNA</td> <td contenteditable='true'>Siège Social : 8, Boulevard Ernesto Che Guevara, Alger</td> <td contenteditable='true'> 021 43 99 98</td> <td contenteditable='true'> 021 43 94 94</td> <td> <button id='modif3' class='btn btn-info modif' name='button'>Modifier</button> </td> <td> <button id='supp3' class='btn btn-info supp' name='button'>Supprimer</button> </td> </tr> <tr> <td style='display:none;'>11</td> <td contenteditable='true'>CAISSE D’ÉPARGNE ET DE PRÉVOYANCE</td> <td contenteditable='true'>CNEP BANQUE</td> <td contenteditable='true'>Lot n°2 Garidi, Kouba – Alger</td> <td contenteditable='true'>0556 64 36 99</td> <td contenteditable='true'>021 91 64 57 et 58</td> <td> <button id='modif4' class='btn btn-info modif' name='button'>Modifier</button> </td> <td> <button id='supp4' class='btn btn-info supp' name='button'>Supprimer</button> </td> </tr> <tr> <td style='display:none;'>5</td> <td contenteditable='true'>CRÉDIT POPULAIRE D’ALGÉRIE</td> <td contenteditable='true'>CPA</td> <td contenteditable='true'>2, Boulevard Colonel Amirouche, Alger</td> <td contenteditable='true'>021 63 57 12</td> <td contenteditable='true'>021 63 56 98 / 63 58 83</td> <td> <button id='modif5' class='btn btn-info modif' name='button'>Modifier</button> </td> <td> <button id='supp5' class='btn btn-info supp' name='button'>Supprimer</button> </td> </tr> </form> </tbody> </code></pre> </div>
``` 最近项目使用datatable,但是刷新遇到了问题,试过fnDraw等函数没有反应,datatable官方api是用ajxa.reload,但是会报没有定义ajax。 还有这个api解释中: var table = $('#example').DataTable( { ajax: "data.json" } ); setInterval( function () { table.ajax.reload(); }, 30000 ); data.json我不太明白是哪个数据,是重新刷新要赋给的数据?,那要怎么传进去呢 下面贴一下我的代码: jQuery.ajaxSetup({ headers: { Authorization: 'MDphZG1pbg=='} }); jQuery(function($) { oTable1 = $('#sample-table-2').DataTable( { /*"columnDefs": [{ "defaultContent": "-", "targets": "_all" }],*/ "sAjaxDataProp":"data", ajax: aa, /*"sPaginationType": "full_numbers",*/ /*"sAjaxSource":"http://123.56.93.33:8088/kiunion-data-provider/ws/users/1",*/ "sAjaxSource":"http://123.56.93.33:8088/kiunionSer/ws/v1.0/vehicleBaseInfo/searchByEnterprise?enterpriseId=1", "bProcessing" : true, "bServerSide": true, "bAutoWidth":true, "fnServerData": function ( sSource, aoData, fnCallback ) { $.ajax( { "dataType": 'json', "type": "GET", "url": sSource, "data": aoData, "success":fnCallback, } ); "aoColumns": [ { mData: 'VehicleID' }, { mData: 'VehicleID' }, { mData: 'StatusID' }, { mData: 'PlateNumber' }, { mData: 'SeqNumber' }, { mData: 'TeamID' }, { mData: 'VehicleID' } ], "aoColumnDefs": [ { "aTargets": [0], "mRender": function(data, type, full) { return "<td><label><input type='checkbox'class='ace' /><span class='lbl'></span></label></td>"; } }, ], "aLengthMenu": [10,20,30,40,50, 100], "oLanguage": { "sLengthMenu": "每页显示 _MENU_ 条记录", "sZeroRecords": "抱歉, 没有找到", "sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据", "sInfoEmpty": "没有数据", "sInfoFiltered": "(从 _MAX_ 条数据中检索)", "oPaginate": { "sFirst": "首页", "sPrevious": "前一页", "sNext": "后一页", "sLast": "尾页" }, "sZeroRecords": "没有检索到数据", "sProcessing": "<img src=’./loading.gif’ />" } } ); $("#acecom").on('click',function(){ console.log("reload"); oTable1.ajax.reload(); }) }) ```
©️2020 CSDN 皮肤主题: Age of Ai 设计师:meimeiellie 返回首页