我有一个表格是在 $（document）.ready 函数中生成的。我也使用jQuery DataTables插件。由于某些原因，当页面加载时，表加载，但第一行显示表中无数据可用。
HTML
< head> < link rel =stylesheettype =text / csshref =/ path / to / css / jquery.dataTables.css> < script type =text / javascriptcharset =utf8src =/ path / to / js / jquery.dataTables.js>< / script>< / head> ; < div class =col-sm-12id =ovs-sum> < table class =table table-stripedid =summary-table> < thead> < tr> < th< Order< / th> < th>规划师< / th> < th>供应商< / th> < th> SKU< / th> < th>描述< / th> < th>数量< / th> < PO> PO Date< / th> < PO追踪< / th> < / tr> < / thead> < tbody> < / tbody> < / table> < / div>
JS / jQuery（scripts.js）
$（document）.ready（function（）{ $ .ajax（{ type：'GET'， url：'models / summary.php'， mimeType：'json'， success：function（data）{ $ .each（data，function（i，data） var body =< tr>; body + =< td>+ data.name +< / td>; body + = td>+ data.address +< / td>; body + =< td>+ data.phone_no +< / td>; body + = < td>+ data.birthday +< / td>; body + =< td>+ data.color +< / td>; body + =< td>+ data.car +< / td>; body + =< td>+ data.hobbies +< / td>; body + =< td>+ data.relatives +< / td>; body + =< / tr>; $（body）.appendTo（$（tbody））; }）; }，错误：function（）{ alert（'Fail！'）; } }）; / * DataTables实例化* / $（＃summary-table）.DataTable（）; }
此外，如果我点击列标题上的排序箭头，我的所有数据都会消失，我只剩下我的列标题和表中没有可用数据。 p>
这个问题存在于IE，Chrome和FireFox中。这是我迄今为止所尝试的：
- 我尝试将 $（＃summary-table）放置.DataTable（ ）; 在我的AJAX调用之前。这不行。
- 我试图替换 $（body）.appendTo（$（tbody））; with $（tbody）.append（body）;`。这不行。
- 我googled。很多SO问题和其他有这个问题的网站都有一个与不良表结构相关的解决方案，但是我找不到我的表结构出错了。查看检查元素，它具有我附加的行，再加上DataTables生成的一堆HTML。控制台中没有错误。
如何让DataTable与当前数据一起使用？我忽略了什么潜在的错误？
解决方案请在您的AJAX加载表附加到正文后尝试启动dataTable 。
$（document）.ready（function（）{ $ .ajax（{ type ：'GET'， url：'models / summary.php'， mimeType：'json'， success：function（data）{ $ .each（data， function（i，data）{ var body =< tr>; body + =< td>+ data.name +< / td>; body + =< td>+ data.address +< / td>; body + =< td>+ data.phone_no +< / td>; body + =< td>+ data.birthday +< / td>; body + =< td>+ data.color +< / td> ; body + =< td>+ data.car +< / td>; body + =< td>+ data.hobbies +< / td> ;; body + =< td>+ data.relatives +< / td>; body + =< / tr>; $（＃summary-table tbody）.append（body）; }）; / * DataTables实例化* / $（＃summary-table）.DataTable（）; }，错误：function（）{ alert（'Fail！'）; } }）; }）;希望，这将有所帮助！
I have a table that is made in the $( document ).ready function. I am also using the jQuery DataTables plugin. For some reason, when the page loads, the table loads but the first row says "No Data Available in Table".
HTML
<head> <link rel="stylesheet" type="text/css" href="/path/to/css/jquery.dataTables.css"> <script type="text/javascript" charset="utf8" src="/path/to/js/jquery.dataTables.js"></script></head> <div class="col-sm-12" id="ovs-sum"> <table class="table table-striped" id="summary-table"> <thead> <tr> <th>Order</th> <th>Planner</th> <th>Vendor</th> <th>SKU</th> <th>Description</th> <th>Quantity</th> <th>PO Date</th> <th>PO Tracking</th> </tr> </thead> <tbody> </tbody> </table> </div>
JS/jQuery (scripts.js)
$ ( document ).ready(function() { $.ajax({ type: 'GET', url: 'models/summary.php', mimeType: 'json', success: function(data) { $.each(data, function(i, data) { var body = "<tr>"; body += "<td>" + data.name + "</td>"; body += "<td>" + data.address + "</td>"; body += "<td>" + data.phone_no + "</td>"; body += "<td>" + data.birthday + "</td>"; body += "<td>" + data.color + "</td>"; body += "<td>" + data.car + "</td>"; body += "<td>" + data.hobbies + "</td>"; body += "<td>" + data.relatives + "</td>"; body += "</tr>"; $( body ).appendTo( $( "tbody" ) ); }); }, error: function() { alert('Fail!'); } }); /*DataTables instantiation.*/ $( "#summary-table" ).DataTable(); }Also, if I click on the sort arrows on the column headers, all of my data disappears and I'm just left with my column headers and "No data available in table.".
This problem exists in IE, Chrome, and FireFox. Here is what I've tried so far:
-I've tried Placing the $( "#summary-table" ).DataTable(); before my AJAX call. That did not work.
-I tried to replace $( body ).appendTo( $( "tbody" ) ); with $( "tbody" ).append( body );`. That did not work.
-I googled. A lot of SO questions and other sites that have this issue have a solution related to bad table structure, but I cannot find where my table structure is going wrong. Looking in inspect element, it has my appended rows, plus a bunch of HTML that DataTables produces. No errors in the console.
How can I get DataTables to work with my current data? What are any potential errors that I am overlooking?
解决方案Please try to initiate the dataTable after your AJAX loaded table is appended on body.
$ ( document ).ready(function() { $.ajax({ type: 'GET', url: 'models/summary.php', mimeType: 'json', success: function(data) { $.each(data, function(i, data) { var body = "<tr>"; body += "<td>" + data.name + "</td>"; body += "<td>" + data.address + "</td>"; body += "<td>" + data.phone_no + "</td>"; body += "<td>" + data.birthday + "</td>"; body += "<td>" + data.color + "</td>"; body += "<td>" + data.car + "</td>"; body += "<td>" + data.hobbies + "</td>"; body += "<td>" + data.relatives + "</td>"; body += "</tr>"; $( "#summary-table tbody" ).append(body); }); /*DataTables instantiation.*/ $( "#summary-table" ).DataTable(); }, error: function() { alert('Fail!'); } }); });Hope, this would help!
更多推荐
jQuery数据表“表中无数据”
发布评论