2

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();仍然无法正常工作。我需要知道我做错了什么？

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

<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>
4

3 回答 3

2

快速浏览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();
}
于 2012-09-12T19:25:50.990 回答
0

而不是使分页成为一个单独的功能，只需在您的重制功能中使用

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

于 2012-09-12T20:03:35.303 回答
0

让您的生活更轻松。只需重新加载整个表而不是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();
}
于 2016-03-23T13:04:40.287 回答