Question

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

我正在尝试使用上面的插件。我在paging()调用了函数onload，它运行正常

<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();仍然我在动态加载内容时无法正常工作。我需要知道我做错了什么？

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4
/strict.dtd">
<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>

Answer 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();
}

Answer 2

而不是将分页功能单独用于重制功能

 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();
    }

Answer 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();
}

动态数据表分页和分类与更改/动态内容

3 个答案: