动态数据表分页和不断变化/动态内容

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>

来源

2012-09-12 Sami

你可以告诉你如何调用$（“＃示例”）。HTML你的onload叫它onclick –

@COLDTOLD。我更新了...我错过了一次，但现在也添加了。它是我所有的代码。 css和js类是下载的，并且在重新加载表格内容之前它们都正常工作。 – Sami

就让我们来看看在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-12 19:25:50

是的，它做了一些工作，但不是必需的。因为它不工作导致我看到一个新的消息“没有数据在表中找到”，但我已经填写数据，我得到的头部和身体的单元格的警报:( – Sami

的HTML（文本）不，我犯了一个错误。我正在修复它，希望得到更好的结果，谢谢你的回复，我测试并更新了 – Sami

@Sami对不起，但我不明白你的问题 –

，而不是把寻呼独立的功能只是在你的翻拍功能

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-12 20:03:35

Yup试过但没有区别 – Sami

使用让您的生活更轻松。只需重新加载整个表，而不是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-23 13:04:40 Sami

动态数据表分页和不断变化/动态内容

回答

相关问题