動態數據表分頁和不斷變化/動態內容

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

動態數據表分頁和不斷變化/動態內容

回答

相關問題