datatables.min.js 重新绑定datatable的数据

使用datatables.min.js进行table的分页, 筛选后重新从后台查询数据修改table信息, 但是datatable的绑定信息没有被修改, 还是第一次的table内容, 网上找的"bDestroy": true,也没有效果, 请各位大神帮忙看看. 谢谢!

 function GetList()
    {
        var UserName = $("#txt_keyword").val();
        var selectId = $("#AccountSelect").val();
        $.ajax({
            type: "POST",
            url: "/Backstage/SystemManage/GetUserForAjax",
            data: { UserName: UserName, selectId: selectId },
            success: function (result) {
                html = "";
                if (selectId != -1) {
                    //$('.table').dataTable().fnClearTable();   //将数据清除 
                }
                if (result.State == 0 && result.Data.length > 0) {

                    for (var i = 0; i < result.Data.length; i++) {
                        html += "<tr>";
                        html += "<td><input type=\"checkbox\" value=\"" + result.Data[i].Id + "\" class=\"i-checks\" name=\"input[]\"></td>";
                        html += "<td><small>" + result.Data[i].Account + "</small></td>";
                        html += "<td><small>" + result.Data[i].RealName + " </small></td>";
                        html += "</tr>";
                    }
                }

                $("#tbodyDept").html(html);

                //$('.table').dataTable().fnRecordsDisplay();
                //$(".table").dataTable().fnDraw();
                var table = $('.table').dataTable({
                    "bFilter": false, //过滤功能  
                    "bDestroy": true,
                    "bSort": false, //排序功能 
                    "bLengthChange": false, //改变每页显示数据数量
                    //"bDeferRender": true,
                    "bPaginate": true,  //开启分页功能,如果不开启,将会全部显示
                    "bProcessing": true,
                    //"bInfo": true,
                    "iDisplayLength": 5,
                    "oLanguage": {
                        "sZeroRecords": "没有找到符合条件的数据",
                        "sProcessing": "<img src=’./Content/InspiniaAdmin/css/plugins/blueimp/img/loading.gif’ />",
                        "sInfo": "当前第 _START_ - _END_ 条 共计 _TOTAL_ 条",
                        "sInfoEmpty": "没有记录",
                        "oPaginate": {
                            "sFirst": "首页",
                            "sPrevious": "前一页",
                            "sNext": "后一页",
                            "sLast": "尾页"
                        }
                    }
                });

3个回答

经过不断的百度和尝试, 最后终于成功了. 使用fnClearTable() 和fnAddData(tableData)方法重新绑定显示
代码如下:

     function GetList() {
        var UserName = $("#txt_keyword").val();
        var selectId = $("#AccountSelect").val();
        $.ajax({
            type: "POST",
            url: "/Backstage/SystemManage/GetUserForAjax",
            data: { UserName: UserName, selectId: selectId },
            success: function (result) {
                            if (result.State == 0 && result.Data.length > 0) {
                    var tableData = new Array(result.Data.length);
                    for (var i = 0; i < result.Data.length; i++) {
                                            arrary = new Array(9);
                        arrary[0] = "<input type=\"checkbox\" value=\"" + result.Data[i].Id + "\" class=\"i-checks\" name=\"input[]\">";
                        arrary[1] = "<small>" + result.Data[i].Account + "</small>";
                        arrary[2] = "<small>" + result.Data[i].RealName + " </small>";
                        if (result.Data[i].Gender == 1) {
                            arrary[3] = "<small>男 </small>";
                        } else if (result.Data[i].Gender == 2) {
                            arrary[3] = "<small>女 </small>"
                        } else {
                            arrary[3] = "<small>未知 </small>"
                        }
                        arrary[4] = result.Data[i].NickName;
                        if (result.Data[i].Source == 1) {
                            arrary[5] = "APP用户";
                        } else {
                            arrary[5] = "后台账号";
                        }
                        if (result.Data[i].MobilePhone != "" && result.Data[i].MobilePhone != null) {
                            arrary[6] = result.Data[i].MobilePhone;
                        } else {
                            arrary[6] = "<small></small>";
                        }
                        if (result.Data[i].DeleteMark == true) {
                            arrary[7] = "<i class=\"fa fa-check text-navy\"></i>";
                        } else {
                            arrary[7] = "<i class=\"fa fa-times text-danger\"></i>";
                        }
                        if (result.Data[i].EnabledMark == true) {
                            arrary[8] = "<i class=\"fa fa-check text-navy\"></i>";
                        } else {
                            arrary[8] = "<i class=\"fa fa-times text-danger\"></i>";
                        }
                        tableData[i] = arrary;
                                                $('.table').dataTable().fnClearTable();   //将数据清除
                $('.table').dataTable().fnAddData(tableData);  //重新绑定table数据
                $('.table').dataTable({
                    "bFilter": false, //过滤功能  
                    "bDestroy": true,
                    "bSort": false, //排序功能 
                    "bLengthChange": false, //改变每页显示数据数量
                    "bPaginate": true,  //开启分页功能,如果不开启,将会全部显示
                    "bProcessing": true,
                    "iDisplayLength": 2,
                    "oLanguage": {
                        "sZeroRecords": "没有找到符合条件的数据",
                        "sProcessing": "稍后...",
                        "sInfo": "当前第 _START_ - _END_ 条 共计 _TOTAL_ 条",
                        "sInfoEmpty": "没有记录",
                        "oPaginate": {
                            "sFirst": "首页",
                            "sPrevious": "前一页",
                            "sNext": "后一页",
                            "sLast": "尾页"
                        }
                    }
                });
            },
            error: function () {
                $("#tbodyDept").html("<tr><td colspan=\"10\"><small class=\"text-warning\">查询数据出现错误!</small></td></tr>");
            }
        });
    }

在数据修改之后,调用此函数对datatable的数据进行重绘,$('.table').DataTable().draw();

wudongqingchunzht
舞动青春zht 我将你的语句放在var table = $('.table').dataTable({ })之前, 没有反应啊, 还是这样, 是我放错地方了吗???请帮忙再看看, 谢谢!
大约 3 年之前 回复

上面的最佳答案还是有一点问题, 当第一次查询的数据为空的时候, 会报错: Cannot read property 'nodeName' of undefined. 原因是数据清除和重新绑定位置放置不正确, 最终调整把数据清除放到 success 开始第一句执行, 把重新绑定放到 if 中最后执行, 这样暂时没有发现其他问题了.

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
datatables.min.js的使用

使用datatables.min.js对table进行分页处理, 5条一页, 首次登陆界面后台查询9条数据到前台正常显示分为2页, 后修改select控件, 再次调用后台查询到7条数据到前台, 前台报错, 如下图, 而且通过上一页下一页还是可以查询到9条数据, 这是怎么回事, 调试时也检查了后台传递过来的值是7条的.请各位大神帮忙看看, 是不是还有什么属性没有设置, 谢谢! ![图片说明](https://img-ask.csdn.net/upload/201703/15/1489563612_525968.png) ``` function GetList() { var UserName = $("#txt_keyword").val(); var selectId = $("#AccountSelect").val(); $.ajax({ type: "POST", url: "/Backstage/SystemManage/GetUserForAjax", data: { UserName: UserName, selectId: selectId }, success: function (result) { html = ""; $("#tbodyDept").html(html); if (result.State == 0 && result.Data.length > 0) { for (var i = 0; i < result.Data.length; i++) { html += "<tr>"; html += "<td><input type=\"checkbox\" value=\"" + result.Data[i].Id + "\" class=\"i-checks\" name=\"input[]\"></td>"; html += "<td><small>" + result.Data[i].Account + "</small></td>"; html += "<td><small>" + result.Data[i].RealName + " </small></td>"; html += "</tr>"; } } $("#tbodyDept").html(html); $('.table').DataTable({ "iDisplayLength": 5, "bFilter": false, //过滤功能 "bSort": false, //排序功能 "bLengthChange": false, //改变每页显示数据数量 "oLanguage": { "sZeroRecords": "没有找到符合条件的数据", "sProcessing": "<img src=’./Content/InspiniaAdmin/css/plugins/blueimp/img/loading.gif’ />", "sInfo": "当前第 _START_ - _END_ 条 共计 _TOTAL_ 条", "sInfoEmpty": "没有记录", "oPaginate": { "sFirst": "首页", "sPrevious": "前一页", "sNext": "后一页", "sLast": "尾页" } } }); }, error: function () { $("#tbodyDept").html("<tr><td colspan=\"10\"><small class=\"text-warning\">查询数据出现错误!</small></td></tr>"); } }); } ``` 可能描述的不太清楚, 实现过程就是通过select控件选择重新查询数据.

datatables.min.js 有了上页 下页, 怎么显示首页尾页

``` $('.table').dataTable({ "bFilter": false, //过滤功能 "bDestroy": true, "bSort": false, //排序功能 "bLengthChange": false, //改变每页显示数据数量 "bPaginate": true, //开启分页功能,如果不开启,将会全部显示 "bProcessing": true, "iDisplayLength": 2, "oLanguage": { "sZeroRecords": "没有找到符合条件的数据", "sProcessing": "稍后...", "sInfo": "当前第 _START_ - _END_ 条 共计 _TOTAL_ 条", "sInfoEmpty": "没有记录", "oPaginate": { "sFirst": "首页", "sPrevious": "前一页", "sNext": "后一页", "sLast": "尾页" } } }); ```

jQuery.dataTables.js插件的样式问题

参考的博文: [jQuery]jQuery DataTables插件自定义Ajax分页实现 - seayxu - 博客园 http://www.cnblogs.com/seayxu/p/5513907.html 使用的后台模板: DataTables | Gentelella https://colorlib.com/polygon/gentelella/tables_dynamic.html # _就我的显示不正常_ ![图片说明](https://img-ask.csdn.net/upload/201707/14/1499998971_519569.png) 博文里的: ![图片说明](https://img-ask.csdn.net/upload/201707/14/1499998992_800222.png) 模板里的: ![图片说明](https://img-ask.csdn.net/upload/201707/14/1499999007_493026.png) 我的js: //初始化表格 function initTable() { table = $("#dataTable").dataTable({ language:lang, //提示信息 autoWidth: false, //禁用自动调整列宽 stripeClasses: ["odd", "even"], //为奇偶行加上样式,兼容不支持CSS伪类的场合 processing: true, //隐藏加载提示,自行处理 serverSide: true, //启用服务器端分页 searching: false, //原生搜索 orderMulti: false, //多列排序 ordering : false, //排序 order: [], //取消默认排序查询,否则复选框一列会出现小箭头 renderer: "bootstrap", //渲染样式:Bootstrap和jquery-ui pagingType: "full_numbers", //分页样式:simple,simple_numbers,full,full_numbers scrollY: "500px", //滚动条 scrollCollapse: "true", columnDefs: [{ "targets": 'nosort', //列的样式名 "orderable": false //包含上样式名‘nosort’的禁止排序 }], ajax: function (data, callback, settings) { $.ajax({ type: "GET", url: "getData", cache: false, //禁用缓存 data: { "page" : (data.start/data.length)+1, "rows" : data.length, }, dataType: "json", success: function (result) { //封装返回数据 var returnData = {}; returnData.draw = data.draw; returnData.recordsTotal = result.totalRecords; returnData.recordsFiltered = result.totalRecords; returnData.data = result.list;//返回的数据列表 console.log(returnData); callback(returnData); } }); }, //列表表头字段 columns: columns_arr }).api(); } 我的html: <!--数据表的内容--> <div style="margin-top: 50px;"> <div class="row"> <div class="col-md-12 col-sm-12 col-xs-12"> <div class="x_panel"> <div class="x_content"> <table id="dataTable" data-reportid="${info.id}" class="table table-striped table-bordered"> <thead> </thead> <tbody> </tbody> </table> </div> </div> </div> </div> </div> <!--/数据表的内容-->

关于Jquery DataTables 数据绑定问题

AJAX 的Success回调到后台返回的Json字符串。 如:[{"amount":2,"apply_id":1"},{"amount":3,"apply_id":2"}] 前台代码: success: function(data){ $('#table_id_example').DataTable({ //我应当怎么写,才能把data绑到Table中 }); },

在用jquery datatables插件的buttons扩展时,设置colvis属性问题

前端框架bootstrap3,使用mvc5 在使用jquery datatables插件的buttons扩展过程中,因为需要设置隐藏显示列的问题,使用了colvis属性, 初始化如下: buttons: [ { extend: 'colvis', text: '显示/隐藏列', columns: ':not(:last-child)', postfixButtons: [{ extend: 'colvisRestore', text: '重置' }, ] }, ] js文件导入顺序如下: jquery-3.0.0.min.js bootstrap.min.js jquery.dataTables.js dataTables.bootstrap.js dataTables.buttons.js buttons.bootstrap.js buttons.colVis.js css文件如下: bootstrap.css dataTables.bootstrap.css buttons.bootstrap.css 遇到的问题:页面生成的“显示/隐藏列”按钮,点击该按钮后弹出一下拉菜单,(内容为列集合,点击可进行隐藏或显示列),此菜单无法关闭,只能重新刷新页面才能关闭,请问怎么解决? 官网的例子:https://datatables.net/extensions/buttons/examples/column_visibility/simple.html 用的谷歌浏览器、火狐浏览器都有此问题,但官网例子则没有该现象。 请问我还需要进行什么设置?盼得到解答,谢谢!

哪个版本的datatables支持ie8?

哪个版本的datatables支持ie8?我的datatables在ie8下搜索功能无效,ie9也不行.我应该用哪个版本才能支持ie8?

jQuery.dataTables.js插件的样式问题,急求

数据为空的时候,提示应该是占满居中的,结果短了一截,不知道该怎么调啊

使用chart.js的数据可视化DataTables.js

<div class="post-text" itemprop="text"> <p>I should like to be able to display my charts in response to a change in my datatables search and/or sorting as shown in this example using highcharts</p> <p>Data Visualization DataTables.js using Highcharts.js.</p> <pre><code>&lt;a href="https://codepen.io/tutsplus/pen/GMVapQ"&gt; &lt;div class="container"&gt; &lt;table id="dt-table"&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;Country&lt;/th&gt; &lt;th&gt;Population (2017)&lt;/th&gt; &lt;th&gt;Density (P/Km²)&lt;/th&gt; &lt;th&gt;Med. Age&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td&gt;China&lt;/td&gt; &lt;td&gt;1,409,517,397&lt;/td&gt; &lt;td&gt;150 &lt;/td&gt; &lt;td&gt;37&lt;/td&gt; &lt;/tr&gt; more code on site .... </code></pre> <p>I am currently using mdbootstrap, PHP, MySQL, datatables.</p> <p>Is it possible to achieve the same results using chart.js and if so are there any coding examples, or should I use this codepen example as my starting point for my chart.js visualization by changing the highcharts coding to the chart.js equivalent.</p> <p>Many Thanks in advance.</p> <p>Colin</p> </div>

为什么DataTable()。ajax.reload()无法使用ajax JSON响应自动重新加载表?

<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.&lt;anonymous&gt; (datatables.min.js:120) at s.iterator (datatables.min.js:111) at s.&lt;anonymous&gt; (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>&lt;?php require_once("C:/wamp/www/Mini_Prj/controllers/mainController.php"); $bnqs=MainController::getBanque(); echo' &lt;thead&gt; &lt;tr&gt; &lt;th style="display:none;"&gt;Id Banque&lt;/th&gt; &lt;th&gt;Nom de la banque&lt;/th&gt; &lt;th&gt;Abrev &lt;/th&gt; &lt;th&gt;Siège Sociale&lt;/th&gt; &lt;th&gt;Tel&lt;/th&gt; &lt;th&gt;Fax&lt;/th&gt; &lt;th&gt;Modifier&lt;/th&gt; &lt;th&gt;Supprimer&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;form method="post"&gt; '; $i=0; foreach ($bnqs as $bnq) { if($bnq['supr']!=1) { echo " &lt;tr&gt; &lt;td style='display:none;'&gt;".$bnq['idbc']."&lt;/td&gt; &lt;td contenteditable='true'&gt;".$bnq['nomb']."&lt;/td&gt; &lt;td contenteditable='true'&gt;".$bnq['abrvb']."&lt;/td&gt; &lt;td contenteditable='true'&gt;".$bnq['sigsocial']."&lt;/td&gt; &lt;td contenteditable='true'&gt;".$bnq['tel']."&lt;/td&gt; &lt;td contenteditable='true'&gt;".$bnq['fax']."&lt;/td&gt; &lt;td&gt; &lt;button id='modif$i' class='btn btn-info modif' name='button'&gt;Modifier&lt;/button&gt; &lt;/td&gt; &lt;td&gt; &lt;button id='supp$i' class='btn btn-info supp' name='button'&gt;Supprimer&lt;/button&gt; &lt;/td&gt; &lt;/tr&gt;"; $i++; } } echo' &lt;/form&gt; &lt;/tbody&gt; '; </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>&lt;div class="updBanque"&gt; &lt;div&gt; &lt;h3&gt; Mise a jours des banques&lt;/h3&gt; &lt;div &gt; &lt;div class="table-responsive"&gt; &lt;table id="tablebqup" class="tableau table table-fixed table-bordered table-dark table-hover "&gt; &lt;?php include './component/tbbanqueupd.php'; ?&gt; &lt;/table&gt; &lt;form method="post"&gt; &lt;button type="button" class="btn btn-info" name="button" id="newbq" &gt;Nouvelle banque&lt;/button&gt; &lt;/form&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>Here is the response:</p> <pre><code> &lt;thead&gt; &lt;tr&gt; &lt;th style="display:none;"&gt;Id Banque&lt;/th&gt; &lt;th&gt;Nom de la banque&lt;/th&gt; &lt;th&gt;Abrev &lt;/th&gt; &lt;th&gt;Siège Sociale&lt;/th&gt; &lt;th&gt;Tel&lt;/th&gt; &lt;th&gt;Fax&lt;/th&gt; &lt;th&gt;Modifier&lt;/th&gt; &lt;th&gt;Supprimer&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;form method="post"&gt; &lt;tr&gt; &lt;td style='display:none;'&gt;4&lt;/td&gt; &lt;td contenteditable='true'&gt;BANQUE DE DÉVELOPPEMENT LOCAL&lt;/td&gt; &lt;td contenteditable='true'&gt;BDL&lt;/td&gt; &lt;td contenteditable='true'&gt;5, rue Gaci Amar, Staoueli, Alger&lt;/td&gt; &lt;td contenteditable='true'&gt;021 39 34 83– 033 52 15&lt;/td&gt; &lt;td contenteditable='true'&gt;021 39 37 53&lt;/td&gt; &lt;td&gt; &lt;button id='modif0' class='btn btn-info modif' name='button'&gt;Modifier&lt;/button&gt; &lt;/td&gt; &lt;td&gt; &lt;button id='supp0' class='btn btn-info supp' name='button'&gt;Supprimer&lt;/button&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td style='display:none;'&gt;2&lt;/td&gt; &lt;td contenteditable='true'&gt;BANQUE DE L’AGRICULTURE ET DU DÉVELOPPEMENT RURAL&lt;/td&gt; &lt;td contenteditable='true'&gt;BADR&lt;/td&gt; &lt;td contenteditable='true'&gt;17, Boulevard Colonel Amirouche, Alger&lt;/td&gt; &lt;td contenteditable='true'&gt;021 64 24 77– 63 38 78&lt;/td&gt; &lt;td contenteditable='true'&gt;021 63 51 46 / 64 34 44&lt;/td&gt; &lt;td&gt; &lt;button id='modif1' class='btn btn-info modif' name='button'&gt;Modifier&lt;/button&gt; &lt;/td&gt; &lt;td&gt; &lt;button id='supp1' class='btn btn-info supp' name='button'&gt;Supprimer&lt;/button&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td style='display:none;'&gt;1&lt;/td&gt; &lt;td contenteditable='true'&gt;BANQUE EXTÉRIEURE D’ALGÉRIE&lt;/td&gt; &lt;td contenteditable='true'&gt;BEA&lt;/td&gt; &lt;td contenteditable='true'&gt;48, Rue des Frères Bouadou, Bir Mourad Raïs – Alger&lt;/td&gt; &lt;td contenteditable='true'&gt;023 83 54 79&lt;/td&gt; &lt;td contenteditable='true'&gt;021 56 30 50 / 056 51 56&lt;/td&gt; &lt;td&gt; &lt;button id='modif2' class='btn btn-info modif' name='button'&gt;Modifier&lt;/button&gt; &lt;/td&gt; &lt;td&gt; &lt;button id='supp2' class='btn btn-info supp' name='button'&gt;Supprimer&lt;/button&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td style='display:none;'&gt;3&lt;/td&gt; &lt;td contenteditable='true'&gt;BANQUE NATIONALE D’ALGÉRIE&lt;/td&gt; &lt;td contenteditable='true'&gt;BNA&lt;/td&gt; &lt;td contenteditable='true'&gt;Siège Social : 8, Boulevard Ernesto Che Guevara, Alger&lt;/td&gt; &lt;td contenteditable='true'&gt; 021 43 99 98&lt;/td&gt; &lt;td contenteditable='true'&gt; 021 43 94 94&lt;/td&gt; &lt;td&gt; &lt;button id='modif3' class='btn btn-info modif' name='button'&gt;Modifier&lt;/button&gt; &lt;/td&gt; &lt;td&gt; &lt;button id='supp3' class='btn btn-info supp' name='button'&gt;Supprimer&lt;/button&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td style='display:none;'&gt;11&lt;/td&gt; &lt;td contenteditable='true'&gt;CAISSE D’ÉPARGNE ET DE PRÉVOYANCE&lt;/td&gt; &lt;td contenteditable='true'&gt;CNEP BANQUE&lt;/td&gt; &lt;td contenteditable='true'&gt;Lot n°2 Garidi, Kouba – Alger&lt;/td&gt; &lt;td contenteditable='true'&gt;0556 64 36 99&lt;/td&gt; &lt;td contenteditable='true'&gt;021 91 64 57 et 58&lt;/td&gt; &lt;td&gt; &lt;button id='modif4' class='btn btn-info modif' name='button'&gt;Modifier&lt;/button&gt; &lt;/td&gt; &lt;td&gt; &lt;button id='supp4' class='btn btn-info supp' name='button'&gt;Supprimer&lt;/button&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td style='display:none;'&gt;5&lt;/td&gt; &lt;td contenteditable='true'&gt;CRÉDIT POPULAIRE D’ALGÉRIE&lt;/td&gt; &lt;td contenteditable='true'&gt;CPA&lt;/td&gt; &lt;td contenteditable='true'&gt;2, Boulevard Colonel Amirouche, Alger&lt;/td&gt; &lt;td contenteditable='true'&gt;021 63 57 12&lt;/td&gt; &lt;td contenteditable='true'&gt;021 63 56 98 / 63 58 83&lt;/td&gt; &lt;td&gt; &lt;button id='modif5' class='btn btn-info modif' name='button'&gt;Modifier&lt;/button&gt; &lt;/td&gt; &lt;td&gt; &lt;button id='supp5' class='btn btn-info supp' name='button'&gt;Supprimer&lt;/button&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/form&gt; &lt;/tbody&gt; </code></pre> </div>

ajax获取数据更新table以后,jquery.datatable的js效果失效了该怎么办呀QAQ?

用了jquery的模板表格,如果table里面放的是静态数据的话,选择展示多少条数据、搜索表格内容的功能都是正常的。 但用ajax从后台获取实际上的数据,append到tbody里面这样的形式后,就发现上面这些功能都失效了。 菜鸡学艺不精,网上的方法都试过了,都不行。 感觉好像是同步异步的问题,但不知道该怎么解决,求大佬指路QAQ。 这个是html: ``` <div class="table-responsive"> <table id="dataTable1" width="100%" class="table table-striped table-lightfont" style="font-size: 15pt"> <thead > <!-- 第二版结果展示 --> <tr> <!-- <th>ID</th> --> <th>站名</th> <th>设备名称</th> <th>电压等级</th> <th>采样时间</th> <th>相位</th> <th>最大过电压(kV)</th> </tr> <!-- ID,站名,设备名称,电压等级,采样时间,相位,最大电压值 --> </thead> <tfoot> <!-- 第二版结果展示 --> <tr> <!-- <th>ID</th> --> <th>站名</th> </th>设备名称</th> <th>电压等级</th> <th>采样时间</th> <th>相位</th> <th>最大过电压(kV)</th> </tr> </tfoot> <tbody id="searchBody"> </tbody> </table> </div> ``` 这个是js: ``` function search() { //alert($("#station").val()) var station = $("#station").val() var start_time = $("#start_time").val() //alert(start_time.toUpperCase) var end_time = $("#end_time").val() var start_hour = $("#start_hour").val() alert(start_time.toUpperCase) var end_hour = $("#end_hour").val() var level = $("#selectLevel").val() var flag = false; //标识,表示页面上数据还未处理完成 $.ajax({ type : "get", url : "observe/search", data : $("#searchForm").serialize(), success : function(data) { /*table = $('#dataTable1').DataTable( { retrieve: true, destroy:true, paging: false } );*/ //alert("sucess!") //var length=getJsonLength(data); console.log(data) var arrData = eval(data); //alert(data[0].sampdate) var searchBody = $("#searchBody"); $("#searchBody").html(""); //var dataTable1 = $("dataTable1"); //$("#dataTable1").html(""); //var bodyInfo=""; //var tableInfo=""; if (data) { for (var i = 0; i < arrData.length; i++) { //ID,站名,设备名称,电压等级,采样时间,相位,最大电压值 var row = “【不重要,略过】"; searchBody.append(row); //bodyInfo+=row; } flag=true; } else { alert("数据库故障或无数据!"); } } }); var loadFile; loadFile = setInterval(function() {//定时检测 if(flag) {//如果数据已经处理完毕 //loadAlljscssFile(); loadjscssfile('static/js/jquery-3.2.1.min.js', "js"); //加载你的js文件 loadjscssfile('static/bootstrap-3.3.7/css/bootstrap.min.css', "css"); //加载你的css文件 loadjscssfile('static/bootstrap-3.3.7/js/bootstrap.min.js', "js"); //加载你的js文件 loadjscssfile('bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css', "css"); //加载你的js文件 loadjscssfile('bower_components/datatables.net/js/jquery.dataTables.min.js', "js"); //加载你的js文件 clearTimeout();//取消定时检测节省开销 } },50); } ```

Laravel - DataTables不会显示结果:“Ajax错误”和“500内部服务器错误”

<div class="post-text" itemprop="text"> <p>I'm new to <code>Laravel PHP Framework</code> and currently continue project that was left by someone. so, because of it, i try to replicate his code <strong>to create new data list using <a href="https://datatables.net/" rel="nofollow noreferrer">DataTables</a> library</strong> </p> <p>what i want to achieve is simple thing, <strong>just show data list</strong>. it's using new table. I will go advance to create other feature like <code>edit</code>, <code>details</code>, <code>action</code> etc. but currently, just to show the data list is still failed.</p> <p><strong>Error:</strong></p> <blockquote> <p><strong>DataTables warning: table id=table - Ajax error. For more information about this error, please see <a href="http://datatables.net/tn/7" rel="nofollow noreferrer">http://datatables.net/tn/7</a></strong></p> </blockquote> <p>This error appears, whenever i try to get data appear. <a href="https://i.stack.imgur.com/1p3B9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1p3B9.png" alt="enter image description here"></a></p> <p>using Chrome's developer tools not help much, i didnt get details whats wrong :</p> <p><a href="https://i.stack.imgur.com/NwO5T.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NwO5T.png" alt="chrome developer tool"></a></p> <p><strong>Chrome's Developer Tools, Network Tab :</strong></p> <p><a href="https://i.stack.imgur.com/CrCaH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CrCaH.png" alt="enter image description here"></a></p> <p><strong>The Tables :</strong></p> <p><a href="https://i.stack.imgur.com/UiovR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UiovR.png" alt="enter image description here"></a></p> <p>**The View Code : **</p> <pre><code>@extends('layouts.admin.main') @section('pageTitle', 'Sodaqoh Revenue') @push('head') &lt;!-- DataTables --&gt; &lt;link href="{{ asset('plugins/datatables/dataTables.bootstrap4.min.css') }}" rel="stylesheet" type="text/css"&gt; &lt;link href="{{ asset('plugins/datatables/buttons.bootstrap4.min.css') }}" rel="stylesheet" type="text/css"&gt; &lt;!-- Responsive datatable examples --&gt; &lt;link href="{{ asset('plugins/datatables/responsive.bootstrap4.min.css') }}" rel="stylesheet" type="text/css"&gt; @endpush @section('content') &lt;div class="row"&gt; &lt;div class="col-12"&gt; &lt;div class="card m-b-20"&gt; &lt;div class="card-body"&gt; &lt;table id="table" class="table table-striped table-bordered dt-responsive nowrap" style="border-collapse: collapse; border-spacing: 0; width: 100%;"&gt; &lt;thead&gt; &lt;tr&gt; &lt;th width="5"&gt;#&lt;/th&gt; &lt;th&gt;{{ __('Name') }}&lt;/th&gt; &lt;th&gt;{{ __('Month') }}&lt;/th&gt; &lt;th&gt;{{ __('Year') }}&lt;/th&gt; &lt;th&gt;{{ __('Total') }}&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;/table&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- end col --&gt; &lt;/div&gt; @endsection @push('scripts') &lt;script src="{{ asset('plugins/jquery-sparkline/jquery.sparkline.min.js') }}"&gt;&lt;/script&gt; &lt;script src="{{ asset('plugins/jquery-sparkline/jquery.sparkline.min.js') }}"&gt;&lt;/script&gt; &lt;!-- Required datatable js --&gt; &lt;script src="{{ asset('plugins/datatables/jquery.dataTables.min.js') }}"&gt;&lt;/script&gt; &lt;script src="{{ asset('plugins/datatables/dataTables.bootstrap4.min.js') }}"&gt;&lt;/script&gt; &lt;!-- Buttons examples --&gt; &lt;script src="{{ asset('plugins/datatables/dataTables.buttons.min.js') }}"&gt;&lt;/script&gt; &lt;script src="{{ asset('plugins/datatables/buttons.bootstrap4.min.js') }}"&gt;&lt;/script&gt; &lt;script src="{{ asset('plugins/datatables/jszip.min.js') }}"&gt;&lt;/script&gt; &lt;script src="{{ asset('plugins/datatables/pdfmake.min.js') }}"&gt;&lt;/script&gt; &lt;script src="{{ asset('plugins/datatables/vfs_fonts.js') }}"&gt;&lt;/script&gt; &lt;script src="{{ asset('plugins/datatables/buttons.html5.min.js') }}"&gt;&lt;/script&gt; &lt;script src="{{ asset('plugins/datatables/buttons.print.min.js') }}"&gt;&lt;/script&gt; &lt;script src="{{ asset('plugins/datatables/buttons.colVis.min.js') }}"&gt;&lt;/script&gt; &lt;!-- Responsive examples --&gt; &lt;script src="{{ asset('plugins/datatables/dataTables.responsive.min.js') }}"&gt;&lt;/script&gt; &lt;script src="{{ asset('plugins/datatables/responsive.bootstrap4.min.js') }}"&gt;&lt;/script&gt; &lt;script&gt; var oTable; oTable = $('#table').DataTable({ processing: true, serverSide: true, dom: 'lBfrtip', order: [[ 3, "asc" ]], pagingType: 'full_numbers', buttons: [ { extend: 'print', autoPrint: true, customize: function ( win ) { $(win.document.body) .css( 'padding', '2px' ) .prepend( '&lt;img src="{{ asset('assets/images/logo.png') }}" style="float:right; top:0; left:0;height: 40px;right: 10px;background: #101010;padding: 8px;border-radius: 4px" /&gt;&lt;h5 style="font-size: 9px;margin-top: 0px;"&gt;&lt;br/&gt;&lt;font style="font-size:14px;margin-top: 5px;margin-bottom:20px;"&gt; @yield('pageTitle')&lt;/font&gt;&lt;br/&gt;&lt;br/&gt;&lt;font style="font-size:8px;margin-top:15px;"&gt;{{date('Y-m-d h:i:s')}}&lt;/font&gt;&lt;/h5&gt;&lt;br/&gt;&lt;br/&gt;' ); $(win.document.body).find( 'div' ) .css( {'padding': '2px', 'text-align': 'center', 'margin-top': '-50px'} ) .prepend( '' ); $(win.document.body).find( 'table' ) .addClass( 'compact' ) .css( { 'font-size': '9px', 'padding': '2px' } ); }, title: '', orientation: 'landscape', exportOptions: {columns: ':visible'} , text: '&lt;i class="fa fa-print" data-toggle="tooltip" title="" data-original-title="Print"&gt;&lt;/i&gt;', //className: 'btn btn-primary' }, {extend: 'colvis', text: '&lt;i class="fa fa-eye" data-toggle="tooltip" title="" data-original-title="Column visible"&gt;&lt;/i&gt;'}, {extend: 'csv', text: '&lt;i class="fa fa-file-excel" data-toggle="tooltip" title="" data-original-title="Export CSV"&gt;&lt;/i&gt;'} ], //sDom: "&lt;'table-responsive fixed't&gt;&lt;'row'&lt;p i&gt;&gt; B", sPaginationType: "bootstrap", destroy: true, responsive: true, scrollCollapse: true, oLanguage: { "sLengthMenu": "_MENU_ ", "sInfo": "Showing &lt;b&gt;_START_ to _END_&lt;/b&gt; of _TOTAL_ entries" }, lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]], ajax: { url: '{!! route('sodaqoh-revenue.list-index') !!}', data: function (d) { d.range = $('input[name=drange]').val(); } }, columns: [ // { data: "rownum", name: "rownum" }, { data: "name", name: "name" }, { data: "month", name: "month" }, { data: "year", name: "year" }, { data: "total", name: "total" } ], }).on( 'processing.dt', function ( e, settings, processing ) {}); $("#table_wrapper .dt-buttons").appendTo("#table_wrapper .dataTables_length"); $('#formsearch').submit(function () { oTable.search( $('#search-table').val() ).draw(); return false; } ); oTable.page.len(25).draw(); function modalDelete(id) { swal({ title: "Are you sure?", text: "Delete this record", type: "warning", showCancelButton: !0, confirmButtonText: "Yes, delete it!", cancelButtonText: "No, cancel!", confirmButtonClass: "btn btn-success", cancelButtonClass: "btn btn-danger m-l-10", buttonsStyling: !1 }).then(function() { deleteRecord(id); }, function(t) { "cancel" === t &amp;&amp; swal("Cancelled", "Your data is safe :)", "error") }) } function deleteRecord(id){ $.ajax({ url: '{{route("sodaqoh-revenue.index")}}' + "/" + id + '?' + $.param({"_token" : '{{ csrf_token() }}' }), type: 'DELETE', complete: function(data) { oTable.draw(); swal("Deleted!", "Data is successfully deleted", "success"); } }); } &lt;/script&gt; @endpush </code></pre> <p><strong>The Controller :</strong></p> <pre><code>&lt;?php namespace App\Http\Controllers\Admin; use App\DzikirPlaylistCategory; use App\DzikirPlaylist; use App\Http\Controllers\Controller; use App\SodaqohRevenue; use App\User; use DB; use Illuminate\Http\Request; use Session; class SodaqohRevenueController extends Controller { protected $rules = [ 'id' =&gt; 'required', 'name' =&gt; 'required', 'month' =&gt; 'required', 'year' =&gt; 'required', 'total' =&gt; 'required', 'point_total' =&gt; 'required', 'point_rate' =&gt; 'required', ]; public function index() { return view('admin.sodaqoh-revenue.index'); } public function listIndex(Request $request) { DB::statement(DB::raw('set @rownum=0')); $model = SodaqohRevenue::all(); $datatables = app('datatables')-&gt;of($model); // -&gt;editColumn('status', function ($model) { // return $model-&gt;getStatusLabel(); // }) // -&gt;addColumn('point', function ($model) { // return $model-&gt;userDetail ? $model-&gt;userDetail-&gt;point : 0; // }) // -&gt;addColumn('action', function ($model) { // return "&lt;a href='". route('user-apps.show', ['id' =&gt; $model-&gt;id]) ."' class='btn btn-primary btn-sm'&gt;&lt;i class='fa fa-eye'&gt;&lt;/i&gt;&lt;/a&gt;"; // }); return $datatables-&gt;make(true); } } </code></pre> <p><strong>The Model :</strong></p> <pre><code>&lt;?php namespace App; use Illuminate\Database\Eloquent\SoftDeletes; use Illuminate\Notifications\Notifiable; class SodaqohRevenue extends BaseModel { use SoftDeletes; const ROLE_APPS = 1; const ROLE_SUPERADMIN = 10; const STATUS_ACTIVE = 1; const STATUS_NEED_CONFIRMATION = 5; const STATUS_BLOCKED = 0; const REGISTER_TYPE_GENERAL = 1; const REGISTER_TYPE_GOOGLE = 2; const REGISTER_TYPE_FACEBOOK = 3; use Notifiable; protected $table = 'revenue'; protected $fillable = [ 'id', 'name', 'month', 'year', 'total', 'point_total', 'point_rate', ]; protected $hidden = [ 'created_by', 'updated_by' ]; public function __construct(array $attributes = array()) { parent::__construct($attributes); } public function scopeRoleMobileApp($query) { return $query-&gt;where($this-&gt;table . '.role', self::ROLE_APPS); } } </code></pre> <p><strong>The Web Route :</strong></p> <pre><code>... Route::get('/sodaqoh-revenue/list-index', ['as' =&gt; 'sodaqoh-revenue.list-index', 'uses' =&gt; 'Admin\\SodaqohRevenueController@listIndex']); Route::resource('/sodaqoh-revenue', 'Admin\\SodaqohRevenueController'); ... </code></pre> <p><strong>Laravel Log:</strong></p> <blockquote> <p><strong>[2019-07-04 21:35:56] local.ERROR: Cannot use Illuminate\Notifications\Notifiable as Notifiable because the name is already in use {"userId":1,"email":"info.zipedia@gmail.com","exception":"[object] (Symfony\Component\Debug\Exception\FatalErrorException(code: 64): Cannot use Illuminate\Notifications\Notifiable as Notifiable because the name is already in use at /Users/zulkifli/zipediaPrj/webZipedia-zul-dev@github/app/SodaqohRevenue.php:7) [stacktrace]#0 {main} "}</strong></p> </blockquote> <p>Any Idea what's wrong ? any help is appreciated.</p> </div>

jQuery dataTable()报错

本人新手,在用jQuery的dataTable()的时候遇到一点小问题。 在对一个用js操作dom对象拼成的表格使用dataTable()方法时报错。 jquery.dataTables.js:6581 Uncaught TypeError: Cannot read property 'asSorting' of undefined. 其他表格显示结果正常。求解 ![图片说明](https://img-ask.csdn.net/upload/201707/26/1501052821_706912.png)

jQuery dataTables使用的时候,返回json数据填充,不能进行分页,而是显示全部数据

今天遇到这样的问题,就是利用jQuery dataTables表格插件,将我后台返回来的JSON数据填充,但是不能分页,而是显示全部的数据,很奇怪,这是运行的截图和jQuery dataTables参数的设置,大牛们帮忙看看,小弟也是刚接触jQuery dataTables。 [code="java"] function loadCustomerInfo(){ var datatable; if(datatable == undefined || datatable == "undefined" || datatable == null){ $("#exportTable").show(); datatable=$("#exportTable").dataTable({ "sPaginationType": "full_numbers", "bFilter":false, "bSort":false, "iDisplayLength": 5, "bRetrieve":true, "bPaginate":true, "bLengthChange": false, "bStateSave" :false, "bServerSide": true, "aoColumns": [ {"mDataProp":"customerID"}, {"mDataProp":"customerName"}, {"mDataProp":"customerTel"}, {"mDataProp":"salesDate"}, {"mDataProp":"operate", "mRender": function(data, type, full) { return '<A href="../OrderdetailsServlet?customerID='+data+'" target="_blank">订单详情</A>';} }], "oLanguage":{ "sLengthMenu": "每页显示 _MENU_ 条记录", "sZeroRecords": "没有检索到数据", "sInfo": "显示 _START_-_END_ 条数据;共有 _TOTAL_ 条记录", "sInfoEmtpy": "没有数据", "sProcessing": "正在加载数据...", "oPaginate": { "sFirst": "首页", "sPrevious": "上一页", "sNext": "下一页", "sLast": "尾页" } }, "sAjaxSource" : "../CustomerServlet?rand="+Math.random(), "fnServerData" : function(sSource, aoData, fnCallback){ $.getJSON( sSource, {contractID:$("#contractID").val(), customerName:encodeURI(encodeURI($("#customerName").val())), customerTel:$("#customerTel").val(), aoData:JSON.stringify(aoData)} , function callback(data){ fnCallback(data); }); } }); } else{ datatable.fnDestroy(); } datatable.fnDraw(); } [/code] [img] [/img]

jquery datatables插件 表格数据初始化时,数据加载两次

/** 表格的数据渲染 */ function drawTable(aa001, aa002, aa003) { dataTable = $("#dataTable").DataTable({ "searching": false, "ordering": false, "destroy": true, "lengthMenu": [ 10, 20, 25, 30 ], "lengthChange": false, "paging": true, "ajax": { "url":"**", "data": {"aa001": aa001, "aa002": aa002, "aa003": aa003} }, "language": { "emptyTable": "无相关数据!", "info": "符合查询条件的数据共 _TOTAL_ 条,当前第 _START_ 至 _END_ 条数据", "infoEmpty": "当前显示0到0条,共0条记录", "lengthMenu": "显示 _MENU_ 条", "loadingRecords": "加载中...", "processing": "加载中...", "zeroRecords": "未查询到相关数据!", "paginate": { "first": "首页", "last": "尾页", "next": "下一页", "previous": "上一页" } }, "columns": [ {"class" : 'details-control', "orderable": false, "data": null, "defaultContent": '' }, { "data": "ab301"}, { "data": "ab303"}, { "data": "ac201"}, { "data": "bm001"}, { "data": "bm004"}, { "data": "afk02"}, { "data": "dc236"}, { "data": "area"} ] }); }

jquery datatable 如何改变字体大小

各位好:目前在使用datatable 插件展示数据,但是发现默认的字体很大,没找到调整的地方 各位知道如何调整吗? 谢谢! 引入的脚本 ``` <link rel="stylesheet" type="text/css" href="css/jquery-ui.css" /> <link rel="stylesheet" type="text/css" href="dataTables/css/dataTables.jqueryui.css" /> <script src="js/jquery-2.2.3.min.js" type="text/javascript"></script> <script type="text/javascript" charset="utf8" src="dataTables/js/jquery.dataTables.js"></script> <script type="text/javascript" charset="utf8" src="dataTables/js/dataTables.jqueryui.js"></script> ``` 效果图如下: ![图片说明](https://img-ask.csdn.net/upload/201606/18/1466264123_443089.jpg)

如何使用PHP处理dataTable

<div class="post-text" itemprop="text"> <p>I want to have my table beautifully display with sorting options. I'm using PHP to retrieve records from a MySQL database. I learn of datatables and saw that they are pretty useful for such purpose.</p> <p>Now, the problem is whenever I use PHP to generate data from the database and dynamically display them in a table it works perfectly with all the datatables styles applying to the table, but I can't get the sorting and pagination features of dataTables to work. Here is how my table displays: <a href="https://i.stack.imgur.com/JIn4d.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JIn4d.png" alt="enter image description here"></a></p> <p>How do I enable the sorting and pagination features that dataTables provides? Here are the scripts to dataTables and the php code I wrote:</p> <pre><code>&lt;!-- DataTables CSS --&gt; &lt;link href="vendor/datatables-plugins/dataTables.bootstrap.css" rel="stylesheet"&gt; &lt;!-- DataTables Responsive CSS --&gt; &lt;link href="vendor/datatables-responsive/dataTables.responsive.css" rel="stylesheet"&gt; &lt;table class="table table-striped table-bordered table-hover" id="example"&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;First Name&lt;/th&gt; &lt;th&gt;Surname&lt;/th&gt; &lt;th&gt;Gender&lt;/th&gt; &lt;th&gt;Birth Date&lt;/th&gt; &lt;th&gt;Address&lt;/th&gt; &lt;th&gt;Nationality&lt;/th&gt; &lt;th&gt;County&lt;/th&gt; &lt;th&gt;Student Type&lt;/th&gt; &lt;th&gt;Class&lt;/th&gt; &lt;th colspan="3"&gt;Operations&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;?php $query = "SELECT student_id, first_name, cell_number, middle_name, surname, gender, date_of_birth, address, nationality, county, student_type, class_name from students INNER JOIN classes ON students.class_id = classes.class_id"; if($result = mysqli_query($connection, $query)){ if(mysqli_num_rows($result) &gt; 0){ while ($row = mysqli_fetch_array($result)){ ?&gt; &lt;tr&gt; &lt;td&gt;&lt;?php echo htmlentities($row['first_name']) ?&gt;&lt;/td&gt; &lt;td&gt;&lt;?php echo htmlentities($row['surname']) ?&gt;&lt;/td&gt; &lt;td&gt;&lt;?php echo htmlentities($row['gender']) ?&gt;&lt;/td&gt; &lt;td&gt;&lt;?php echo htmlentities($row['date_of_birth']) ?&gt;&lt;/td&gt; &lt;td&gt;&lt;?php echo htmlentities($row['address']) ?&gt;&lt;/td&gt; &lt;td&gt;&lt;?php echo htmlentities($row['nationality']) ?&gt;&lt;/td&gt; &lt;td&gt;&lt;?php echo htmlentities($row['county'])?&gt;&lt;/td&gt; &lt;td&gt;&lt;?php echo htmlentities($row['student_type'])?&gt;&lt;/td&gt; &lt;td&gt;&lt;?php echo htmlentities($row['class_name'])?&gt;&lt;/td&gt; &lt;td align="center"&gt;&lt;a class="page_anchor" href="edit_student.php?student=&lt;?php echo urlencode($row['student_id']); ?&gt;"&gt;Edit&lt;/a&gt;&lt;/td&gt; &lt;td align="center"&gt;&lt;a class="page_anchor" href="create_grades.php?student=&lt;?php echo urlencode($row['student_id']); ?&gt;"&gt;Grades&lt;/a&gt;&lt;/td&gt; &lt;td align="center"&gt;&lt;a class="page_anchor" href="student_details.php?student=&lt;?php echo urlencode($row['student_id']); ?&gt;"&gt;Details&lt;/a&gt;&lt;/td&gt; &lt;/tr&gt; &lt;!-- closing the while loop --&gt; &lt;?php }?&gt; &lt;/tbody&gt; &lt;!-- closing the if mysqli_num_rows if statement --&gt; &lt;?php } else { echo "No record found"; }?&gt; &lt;!-- closing the if $result = mysqli_query($connection, sql) if statement --&gt; &lt;?php } else { die("Database query failed. ". mysqli_error($connection)); } ?&gt; &lt;/table&gt; &lt;!-- jQuery --&gt; &lt;script src="vendor/jquery/jquery.min.js"&gt;&lt;/script&gt; &lt;!-- Bootstrap Core JavaScript --&gt; &lt;script src="vendor/bootstrap/js/bootstrap.min.js"&gt;&lt;/script&gt; &lt;script src="vendor/datatables/js/jquery.dataTables.min.js"&gt;&lt;/script&gt; &lt;script src="vendor/datatables-responsive/dataTables.responsive.js"&gt;&lt;/script&gt; &lt;script&gt; $(document).ready(function() { $('#example').DataTable({ responsive: true }); }); &lt;/script&gt; </code></pre> <p>Here are the errors I'm receiving from the JS console:</p> <pre><code>Uncaught TypeError: Cannot read property 'mData' of undefined at HTMLTableCellElement.&lt;anonymous&gt; (jquery.dataTables.min.js:90) at Function.each (jquery.min.js:2) at r.fn.init.each (jquery.min.js:2) at HTMLTableElement.&lt;anonymous&gt; (jquery.dataTables.min.js:90) at Function.each (jquery.min.js:2) at r.fn.init.each (jquery.min.js:2) at r.fn.init.m [as dataTable] (jquery.dataTables.min.js:82) at r.fn.init.h.fn.DataTable (jquery.dataTables.min.js:166) at HTMLDocument.&lt;anonymous&gt; (index.php:429) at j (jquery.min.js:2) Uncaught TypeError: Cannot read property 'defaults' of undefined at f (dataTables.bootstrap.min.js:5) at dataTables.bootstrap.min.js:8 at dataTables.bootstrap.min.js:8 </code></pre> <p>Here is a warning that I also saw in the JS console:</p> <pre><code>jQuery.Deferred exception: Cannot read property 'mData' of undefined TypeError: Cannot read property 'mData' of undefined at HTMLTableCellElement.&lt;anonymous&gt; (http://localhost/SchoolMate/vendor/datatables/js/jquery.dataTables.min.js:90:236) at Function.each (http://localhost/SchoolMate/vendor/jquery/jquery.min.js:2:2815) at r.fn.init.each (http://localhost/SchoolMate/vendor/jquery/jquery.min.js:2:1003) at HTMLTableElement.&lt;anonymous&gt; (http://localhost/SchoolMate/vendor/datatables/js/jquery.dataTables.min.js:90:192) at Function.each (http://localhost/SchoolMate/vendor/jquery/jquery.min.js:2:2815) at r.fn.init.each (http://localhost/SchoolMate/vendor/jquery/jquery.min.js:2:1003) at r.fn.init.m [as dataTable] (http://localhost/SchoolMate/vendor/datatables/js/jquery.dataTables.min.js:82:388) at r.fn.init.h.fn.DataTable (http://localhost/SchoolMate/vendor/datatables/js/jquery.dataTables.min.js:166:245) at HTMLDocument.&lt;anonymous&gt; (http://localhost/SchoolMate/index.php:429:23) at j (http://localhost/SchoolMate/vendor/jquery/jquery.min.js:2:29568) undefined </code></pre> </div>

datatable页数绑定事件

我想请教一个问题,我想给datatable分页上面的页数绑定一个点击事件怎么绑定!!! 急求 非常感谢大神们的帮助.

我在使用datatables.net时遇到了我的DataTables问题

<div class="post-text" itemprop="text"> <p>Im Having a problem with my DataTables im using datatables.net the problem im having right now is the "Showing # to # of # entries" is not working and not counting the data that it is showing in the tables and the pagination is not working and the search bar is not functioning the "Show 10/100 entries" is not working.</p> <p>PS: I put quotation on them because i dont know what do you call them.</p> <p><strong>This is my html and ajax code</strong></p> <pre><code>&lt;div class="card card-dark"&gt; &lt;h6 class="card-header"&gt;User Status Details&lt;/h6&gt; &lt;div class="card-body"&gt; &lt;span id="message"&gt;&lt;/span&gt; &lt;div class="table-responsive"&gt; &lt;table class="table table-striped" id="table-1"&gt; &lt;/div&gt; &lt;/table&gt; &lt;script&gt; $(document).ready(function(){ load_user_data(); function load_user_data() { var action = 'fetch'; $.ajax({ url:'action', method:'POST', data:{action:action}, success:function(data) { $('#table-1').html(data); } }); } $(document).on('click', '.action', function(){ var id = $(this).data('id'); var user_status = $(this).data('user_status'); var action = 'change_status'; $('#message').html(''); if(confirm("Change User Status")) { $.ajax({ url:'action', method:'POST', data:{id:id, user_status:user_status, action:action}, success:function(data) { if(data != '') { load_user_data(); $('#message').html(data); } } }); } else { return false; } }); }); &lt;/script&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p><strong>my action code</strong></p> <pre><code>if(isset($_POST['action'])) { if($_POST["action"] == 'fetch') { $output = ''; $query = "SELECT * FROM users WHERE user_type = 'user' ORDER BY username ASC"; $statement = $connect-&gt;prepare($query); $statement-&gt;execute(); $result = $statement-&gt;fetchAll(); $output .= ' &lt;table class="table table-striped" id="table-1"&gt; &lt;tr&gt; &lt;td&gt;ID #&lt;/td&gt; &lt;td&gt;Username&lt;/td&gt; &lt;td&gt;Status&lt;/td&gt; &lt;td&gt;Action&lt;/td&gt; &lt;/tr&gt; '; foreach($result as $row) { $status = ''; if($row["user_status"] == 'Active') { $status = '&lt;span class="badge badge-primary"&gt;Active&lt;/span&gt;'; } else { $status = '&lt;span class="badge badge-primary"&gt;Inactive&lt;/span&gt;'; } $output .= ' &lt;tr&gt; &lt;td&gt;'.$row['id'].'&lt;/td&gt; &lt;td&gt;'.$row['username'].'&lt;/td&gt; &lt;td&gt;'.$status.'&lt;/td&gt; &lt;td&gt;&lt;button type="button" name="action" class="btn btn-info btn-xs action" data-id="'.$row["id"].'" data-user_status="'.$row["user_status"].'"&gt;Action&lt;/button&gt;&lt;/td&gt; &lt;/tr&gt; '; } $output .= '&lt;/table&gt;'; echo $output; } if($_POST["action"] == 'change_status') { $status = ''; if($_POST['user_status'] == 'Active') { $status = 'Inactive'; } else { $status = 'Active'; } $query = ' UPDATE users SET user_status = :user_status WHERE id = :id '; $statement = $connect-&gt;prepare($query); $statement-&gt;execute( array( ':user_status' =&gt; $status, ':id' =&gt; $_POST['id'] ) ); $result = $statement-&gt;fetchAll(); if(isset($result)) { echo '&lt;div class="alert alert-info"&gt;User status set to &lt;strong&gt;'.$status.'&lt;/strong&gt;&lt;div&gt;'; } } } ?&gt; </code></pre> <p>I cant figure out whats missing on my code but the ajax code is working fine and the data is showing in my DataTable</p> </div>

请问我用 datatables ajax分页信息错误得这么解决

请问dataTable ajax分页后怎么处理分页信息,有哪位知道的教教我!实在感谢 ![图片说明](https://img-ask.csdn.net/upload/201706/15/1497516515_722286.png) ![图片说明](https://img-ask.csdn.net/upload/201706/15/1497516525_301104.png) ![图片说明](https://img-ask.csdn.net/upload/201706/15/1497516537_744512.png) ![图片说明](https://img-ask.csdn.net/upload/201706/15/1497516549_445168.png)

大学四年自学走来,这些私藏的实用工具/学习网站我贡献出来了

大学四年,看课本是不可能一直看课本的了,对于学习,特别是自学,善于搜索网上的一些资源来辅助,还是非常有必要的,下面我就把这几年私藏的各种资源,网站贡献出来给你们。主要有:电子书搜索、实用工具、在线视频学习网站、非视频学习网站、软件下载、面试/求职必备网站。 注意:文中提到的所有资源,文末我都给你整理好了,你们只管拿去,如果觉得不错,转发、分享就是最大的支持了。 一、电子书搜索 对于大部分程序员...

在中国程序员是青春饭吗?

今年,我也32了 ,为了不给大家误导,咨询了猎头、圈内好友,以及年过35岁的几位老程序员……舍了老脸去揭人家伤疤……希望能给大家以帮助,记得帮我点赞哦。 目录: 你以为的人生 一次又一次的伤害 猎头界的真相 如何应对互联网行业的「中年危机」 一、你以为的人生 刚入行时,拿着傲人的工资,想着好好干,以为我们的人生是这样的: 等真到了那一天,你会发现,你的人生很可能是这样的: ...

Java基础知识面试题(2020最新版)

文章目录Java概述何为编程什么是Javajdk1.5之后的三大版本JVM、JRE和JDK的关系什么是跨平台性?原理是什么Java语言有哪些特点什么是字节码?采用字节码的最大好处是什么什么是Java程序的主类?应用程序和小程序的主类有何不同?Java应用程序与小程序之间有那些差别?Java和C++的区别Oracle JDK 和 OpenJDK 的对比基础语法数据类型Java有哪些数据类型switc...

我以为我学懂了数据结构,直到看了这个导图才发现,我错了

数据结构与算法思维导图

技术大佬:我去,你写的 switch 语句也太老土了吧

昨天早上通过远程的方式 review 了两名新来同事的代码,大部分代码都写得很漂亮,严谨的同时注释也很到位,这令我非常满意。但当我看到他们当中有一个人写的 switch 语句时,还是忍不住破口大骂:“我擦,小王,你丫写的 switch 语句也太老土了吧!” 来看看小王写的代码吧,看完不要骂我装逼啊。 private static String createPlayer(PlayerTypes p...

和黑客斗争的 6 天!

互联网公司工作,很难避免不和黑客们打交道,我呆过的两家互联网公司,几乎每月每天每分钟都有黑客在公司网站上扫描。有的是寻找 Sql 注入的缺口,有的是寻找线上服务器可能存在的漏洞,大部分都...

Linux 会成为主流桌面操作系统吗?

整理 |屠敏出品 | CSDN(ID:CSDNnews)2020 年 1 月 14 日,微软正式停止了 Windows 7 系统的扩展支持,这意味着服役十年的 Windows 7,属于...

讲一个程序员如何副业月赚三万的真实故事

loonggg读完需要3分钟速读仅需 1 分钟大家好,我是你们的校长。我之前讲过,这年头,只要肯动脑,肯行动,程序员凭借自己的技术,赚钱的方式还是有很多种的。仅仅靠在公司出卖自己的劳动时...

学习总结之HTML5剑指前端(建议收藏,图文并茂)

前言学习《HTML5与CSS3权威指南》这本书很不错,学完之后我颇有感触,觉得web的世界开明了许多。这本书是需要有一定基础的web前端开发工程师。这本书主要学习HTML5和css3,看...

女程序员,为什么比男程序员少???

昨天看到一档综艺节目,讨论了两个话题:(1)中国学生的数学成绩,平均下来看,会比国外好?为什么?(2)男生的数学成绩,平均下来看,会比女生好?为什么?同时,我又联想到了一个技术圈经常讨...

搜狗输入法也在挑战国人的智商!

故事总是一个接着一个到来...上周写完《鲁大师已经彻底沦为一款垃圾流氓软件!》这篇文章之后,鲁大师的市场工作人员就找到了我,希望把这篇文章删除掉。经过一番沟通我先把这篇文章从公号中删除了...

副业收入是我做程序媛的3倍,工作外的B面人生是怎样的?

提到“程序员”,多数人脑海里首先想到的大约是:为人木讷、薪水超高、工作枯燥…… 然而,当离开工作岗位,撕去层层标签,脱下“程序员”这身外套,有的人生动又有趣,马上展现出了完全不同的A/B面人生! 不论是简单的爱好,还是正经的副业,他们都干得同样出色。偶尔,还能和程序员的特质结合,产生奇妙的“化学反应”。 @Charlotte:平日素颜示人,周末美妆博主 大家都以为程序媛也个个不修边幅,但我们也许...

MySQL数据库面试题(2020最新版)

文章目录数据库基础知识为什么要使用数据库什么是SQL?什么是MySQL?数据库三大范式是什么mysql有关权限的表都有哪几个MySQL的binlog有有几种录入格式?分别有什么区别?数据类型mysql有哪些数据类型引擎MySQL存储引擎MyISAM与InnoDB区别MyISAM索引与InnoDB索引的区别?InnoDB引擎的4大特性存储引擎选择索引什么是索引?索引有哪些优缺点?索引使用场景(重点)...

新一代神器STM32CubeMonitor介绍、下载、安装和使用教程

关注、星标公众号,不错过精彩内容作者:黄工公众号:strongerHuang最近ST官网悄悄新上线了一款比较强大的工具:STM32CubeMonitor V1.0.0。经过我研究和使用之...

记一次腾讯面试,我挂在了最熟悉不过的队列上……

腾讯后台面试,面试官问:如何自己实现队列?

如果你是老板,你会不会踢了这样的员工?

有个好朋友ZS,是技术总监,昨天问我:“有一个老下属,跟了我很多年,做事勤勤恳恳,主动性也很好。但随着公司的发展,他的进步速度,跟不上团队的步伐了,有点...

我入职阿里后,才知道原来简历这么写

私下里,有不少读者问我:“二哥,如何才能写出一份专业的技术简历呢?我总感觉自己写的简历太烂了,所以投了无数份,都石沉大海了。”说实话,我自己好多年没有写过简历了,但我认识的一个同行,他在阿里,给我说了一些他当年写简历的方法论,我感觉太牛逼了,实在是忍不住,就分享了出来,希望能够帮助到你。 01、简历的本质 作为简历的撰写者,你必须要搞清楚一点,简历的本质是什么,它就是为了来销售你的价值主张的。往深...

冒泡排序动画(基于python pygame实现)

本项目效果初始截图如下 动画见本人b站投稿:https://www.bilibili.com/video/av95491382 本项目对应github地址:https://github.com/BigShuang python版本:3.6,pygame版本:1.9.3。(python版本一致应该就没什么问题) 样例gif如下 ======================= 大爽歌作,mad

Redis核心原理与应用实践

Redis核心原理与应用实践 在很多场景下都会使用Redis,但是到了深层次的时候就了解的不是那么深刻,以至于在面试的时候经常会遇到卡壳的现象,学习知识要做到系统和深入,不要把Redis想象的过于复杂,和Mysql一样,是个读取数据的软件。 有一个理解是Redis是key value缓存服务器,更多的优点在于对value的操作更加丰富。 安装 yum install redis #yum安装 b...

现代的 “Hello, World”,可不仅仅是几行代码而已

作者 |Charles R. Martin译者 | 弯月,责编 | 夕颜头图 |付费下载自视觉中国出品 | CSDN(ID:CSDNnews)新手...

带了6个月的徒弟当了面试官,而身为高级工程师的我天天修Bug......

即将毕业的应届毕业生一枚,现在只拿到了两家offer,但最近听到一些消息,其中一个offer,我这个组据说客户很少,很有可能整组被裁掉。 想问大家: 如果我刚入职这个组就被裁了怎么办呢? 大家都是什么时候知道自己要被裁了的? 面试软技能指导: BQ/Project/Resume 试听内容: 除了刷题,还有哪些技能是拿到offer不可或缺的要素 如何提升面试软实力:简历, 行为面试,沟通能...

!大部分程序员只会写3年代码

如果世界上都是这种不思进取的软件公司,那别说大部分程序员只会写 3 年代码,恐怕就没有程序员这种职业。

离职半年了,老东家又发 offer,回不回?

有小伙伴问松哥这个问题,他在上海某公司,在离职了几个月后,前公司的领导联系到他,希望他能够返聘回去,他很纠结要不要回去? 俗话说好马不吃回头草,但是这个小伙伴既然感到纠结了,我觉得至少说明了两个问题:1.曾经的公司还不错;2.现在的日子也不是很如意。否则应该就不会纠结了。 老实说,松哥之前也有过类似的经历,今天就来和小伙伴们聊聊回头草到底吃不吃。 首先一个基本观点,就是离职了也没必要和老东家弄的苦...

2020阿里全球数学大赛:3万名高手、4道题、2天2夜未交卷

阿里巴巴全球数学竞赛( Alibaba Global Mathematics Competition)由马云发起,由中国科学技术协会、阿里巴巴基金会、阿里巴巴达摩院共同举办。大赛不设报名门槛,全世界爱好数学的人都可参与,不论是否出身数学专业、是否投身数学研究。 2020年阿里巴巴达摩院邀请北京大学、剑桥大学、浙江大学等高校的顶尖数学教师组建了出题组。中科院院士、美国艺术与科学院院士、北京国际数学...

为什么你不想学习?只想玩?人是如何一步一步废掉的

不知道是不是只有我这样子,还是你们也有过类似的经历。 上学的时候总有很多光辉历史,学年名列前茅,或者单科目大佬,但是虽然慢慢地长大了,你开始懈怠了,开始废掉了。。。 什么?你说不知道具体的情况是怎么样的? 我来告诉你: 你常常潜意识里或者心理觉得,自己真正的生活或者奋斗还没有开始。总是幻想着自己还拥有大把时间,还有无限的可能,自己还能逆风翻盘,只不是自己还没开始罢了,自己以后肯定会变得特别厉害...

HTTP与HTTPS的区别

面试官问HTTP与HTTPS的区别,我这样回答让他竖起大拇指!

程序员毕业去大公司好还是小公司好?

虽然大公司并不是人人都能进,但我仍建议还未毕业的同学,尽力地通过校招向大公司挤,但凡挤进去,你这一生会容易很多。 大公司哪里好?没能进大公司怎么办?答案都在这里了,记得帮我点赞哦。 目录: 技术氛围 内部晋升与跳槽 啥也没学会,公司倒闭了? 不同的人脉圈,注定会有不同的结果 没能去大厂怎么办? 一、技术氛围 纵观整个程序员技术领域,哪个在行业有所名气的大牛,不是在大厂? 而且众所...

男生更看重女生的身材脸蛋,还是思想?

往往,我们看不进去大段大段的逻辑。深刻的哲理,往往短而精悍,一阵见血。问:产品经理挺漂亮的,有点心动,但不知道合不合得来。男生更看重女生的身材脸蛋,还是...

程序员为什么千万不要瞎努力?

本文作者用对比非常鲜明的两个开发团队的故事,讲解了敏捷开发之道 —— 如果你的团队缺乏统一标准的环境,那么即使勤劳努力,不仅会极其耗时而且成果甚微,使用...

为什么程序员做外包会被瞧不起?

二哥,有个事想询问下您的意见,您觉得应届生值得去外包吗?公司虽然挺大的,中xx,但待遇感觉挺低,马上要报到,挺纠结的。

立即提问
相关内容推荐