动态数据表分页和排序与变化/动态内容答案

【问题标题】：Dynamic data table pagination and sorting with changing/dynamic contents动态数据表分页和排序与变化/动态内容
【发布时间】：2012-09-12 18:00:50
【问题描述】：

http://www.datatables.net/releases/DataTables-1.9.3.zip

我正在尝试使用上述插件。我在onload 调用函数paging()，它工作正常

<body id="dt_example" onload='paging()'>

但是当我在按钮单击时使用相同的数据（我在表中拥有的静态数据）重新加载表的 innerHTML（例如 mytable 的 id）

<input type ='button' value='click To reload Table contents' onclick='remake()'/>

function remake() 
{
    var ht='<thead><tr><th>dfsdd</th><th>Browser</th></tr></thead>';
    ht = ht + '<tbody>';
    ht = ht + '<tr><td> shjhds</td><td></td></tr>';
    ht = ht + '<tr><td>dsdsd</td><td>xsax</td></tr>';
    ht = ht + '<tr><td>dasdd</td><td>bdsffa</td></tr>';
    ht = ht + '<tr><td>fsdfsd</td><td></td></tr>';
    ht = ht + '<tr><td>kghfagh</td><td>xzxz</td></tr>';
    ht = ht + '<tr><td></td><td>kghfagh</td></tr>';
    ht = ht + '<tr><td>rgsg</td><td>bnfjf</td></tr>';
    ht = ht + '<tr><td></td><td>fsdfs</td></tr>';
    ht = ht + '</tbody>';

    $("#example").html(ht);
    paging();
 }

 function paging()
 {
     $('#example').dataTable();
 }

动态更改表格内容后，无论是排序还是分页，都不起作用

datatables.net 已明确指导使用$('#example').dataTable(); 仍然我在动态加载内容时无法正常工作。我需要知道我做错了什么？

可选择查看（我的完整代码）

<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        
        <title>DataTables example</title>
        <style type="text/css" title="currentStyle">
            @import "css/demo_page.css";
            @import "css/demo_table.css";
        </style>
        <script type="text/javascript" language="javascript" src="js/jquery.js">
</script>
<script type="text/javascript" language="javascript" src="js/jquery.dataTables.js">
</script>

<script type="text/javascript" charset="utf-8">
function paging()
{
    $('#example').dataTable();
}

 function remake()
 {
    var ht='<thead><tr><th>dfsdd</th><th>Browser</th></tr></thead>';
    ht = ht + '<tr><td> shjhds</td><td></td></tr>';
    ht = ht + '<tr><td>dsdsd</td><td>xsax</td></tr>';
    ht = ht + '<tr><td>dasdd</td><td>bdsffa</td></tr>';
    ht = ht + '<tr><td>fsdfsd</td><td></td></tr>';
    ht = ht + '<tr><td>kghfagh</td><td>xzxz</td></tr>';
    ht = ht + '<tr><td></td><td>kghfagh</td></tr>';
    ht = ht + '<tr><td>rgsg</td><td>bnfjf</td></tr>';
    ht = ht + '<tr><td></td><td>fsdfs</td></tr>';
    ht = ht + '</tbody>';
    $("#example").html(ht);
    paging();
    }
</script>
</head>

<body id="dt_example" onload='paging()'>
    <div id="container">
    <input type ='button' value='click To reload Table contents' onclick='remake()' />
            <div id="demo">
            <table cellpadding="0" cellspacing="0" border="5" class="display" id="example" width="100%">
                <thead>
                    <tr>
                        <th>dfsdd</th>
                        <th>Browser</th>
                    </tr>
                </thead>
                <tbody>
                    <tr><td> shjhds</td><td></td></tr>
                    <tr><td>dsdsd</td><td>xsax</td></tr>
                    <tr><td>dasdd</td><td>bdsffa</td></tr>
                    <tr><td>fsdfsd</td><td></td></tr>
                    <tr><td>kghfagh</td><td>xzxz</td></tr>
                    <tr><td></td><td>kghfagh</td></tr>
                    <tr><td>rgsg</td><td>bnfjf</td></tr>
                    <tr><td></td><td>fsdfs</td></tr>
                    <tr><td>dfsas</td><td>caadada</td></tr>
                </tbody>
            </table>
            </div>
            </div>
    </body>
</html>

【问题讨论】：

你能告诉你如何调用 $("#example").html 你叫它 onload onclick
@COLDTOLD。我已经更新了...我错过了一次，但现在也添加了。这是我所有的代码。 css 和 js 类与下载时一样，在重新加载表格内容之前一切正常

标签： jquery pagination datatables tablesorter jquery-pagination

【解决方案1】：

快速查看API 表明您可以销毁/重新制作表格或对其进行操作。我将向您展示销毁和重制方法。但是您可以使用 javascript 删除/清除表格并向表格添加新行，而无需直接编辑 DOM。

var myTable;
function paging() {
    myTable = $('#example').dataTable();
}
function remake() {
myTable.fnDestroy();
var ht='<thead><tr><th>dfsdd</th><th>Browser</th></tr></thead>';
ht = ht + '<tr><td> shjhds</td><td></td></tr>';
ht = ht + '<tr><td>dsdsd</td><td>xsax</td></tr>';
ht = ht + '<tr><td>dasdd</td><td>bdsffa</td></tr>';
ht = ht + '<tr><td>fsdfsd</td><td></td></tr>';
ht = ht + '<tr><td>kghfagh</td><td>xzxz</td></tr>';
ht = ht + '<tr><td></td><td>kghfagh</td></tr>';
ht = ht + '<tr><td>rgsg</td><td>bnfjf</td></tr>';
ht = ht + '<tr><td></td><td>fsdfs</td></tr>';
ht = ht + '</tbody>';
$("#example").html(ht);
paging();
}

【讨论】：

是的，它做了一些工作，但不是必需的。由于它不起作用，导致我看到一条新消息“在表格中找不到数据”，但我已经填写了数据，我正在警报中获取头部和身体单元格的 html（文本）:(
不，我犯了一个错误。我正在修复它。期待更好的结果。感谢您的友好回复。我测试和更新
@Sami 很抱歉，我不明白你的问题。
没关系。除非这对我来说是一个有趣的问题，否则我通常不会投票。

【解决方案2】：

不要让分页成为一个单独的函数，而是在你的 remake 函数中使用

 function remake() {
    var ht='<thead><tr><th>dfsdd</th><th>Browser</th></tr></thead>';
    ht = ht + '<tr><td> shjhds</td><td></td></tr>';
    ht = ht + '<tr><td>dsdsd</td><td>xsax</td></tr>';
    ht = ht + '<tr><td>dasdd</td><td>bdsffa</td></tr>';
    ht = ht + '<tr><td>fsdfsd</td><td></td></tr>';
    ht = ht + '<tr><td>kghfagh</td><td>xzxz</td></tr>';
    ht = ht + '<tr><td></td><td>kghfagh</td></tr>';
    ht = ht + '<tr><td>rgsg</td><td>bnfjf</td></tr>';
    ht = ht + '<tr><td></td><td>fsdfs</td></tr>';
    ht = ht + '</tbody>';
    $("#example").html(ht);
    $('#example').dataTable();
    }

【讨论】：

【解决方案3】：

让您的生活更轻松。只需重新加载整个表而不是 thead 和 tbody 然后使用

$('#demo').html(tableHtml); //Demo is id container of your table
$('#example').dataTable();//example is id of table

和tableHtml一样

vr tableHtml ='';
function remake() {
var ht = '<table id="example">';
ht = ht + '<thead><tr><th>dfsdd</th><th>Browser</th></tr></thead>';
ht = ht + '<tr><td> shjhds</td><td></td></tr>';
ht = ht + '<tr><td>dsdsd</td><td>xsax</td></tr>';
ht = ht + '<tr><td>dasdd</td><td>bdsffa</td></tr>';
ht = ht + '<tr><td>fsdfsd</td><td></td></tr>';
ht = ht + '<tr><td>kghfagh</td><td>xzxz</td></tr>';
ht = ht + '<tr><td></td><td>kghfagh</td></tr>';
ht = ht + '<tr><td>rgsg</td><td>bnfjf</td></tr>';
ht = ht + '<tr><td></td><td>fsdfs</td></tr>';
ht = ht + '</tbody>';
ht = ht + '</table>';
tableHtml = ht;
$("#demo").html(tableHtml);
$('#example').dataTable();
}

【讨论】：