使用.getJson構建動態表

所以我一直在閱讀tablesorter的文檔，但我現在想根據數據庫中的內容構建動態HTML表。我決定爲此使用getJson方法。使用.getJson構建動態表

我的問題是，儘管表已建好，並且每行可以看到所有相關記錄，但是在循環遍歷getJson方法返回的所有對象並構建表後，tablesorter不會在我的表上初始化。

這裏是我的代碼：

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="UTF-8"> 
     <title>Test Test</title> 
     <!-- load tableSorter theme --> 
     <link href="./includes/tablesorter-master/css/theme.default.css" rel="stylesheet"> 
     <!-- load jQuery and tableSorter scripts --> 
     <script type="text/javascript" src="./includes/jquery-2.1.0.js"></script> 
     <!-- <script src="http://code.jquery.com/jquery-1.11.0.js"></script> --> 
     <script type="text/javascript" src="./includes/tablesorter-master/js/jquery.tablesorter.js"></script> 
     <!-- load tableSorter widgets --> 
     <script type="text/javascript" src="./includes/tablesorter-master/js/jquery.tablesorter.widgets.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function(){ 
       //loader(); 
       $.getJSON("./get_recs.php",function(data){ 
        $("#mytable").append("<thead><tr><th>Test1</th><th>Test2</th><th>Test3</th>" + 
             "<th>Test4</th><th>Test5</th><th>" + 
             "Test6</th><th>Test7</th><th>Test8</th>" + 
             "<th>Test9</th></tr></thead>"); 
        $("#mytable").append("<tbody>"); 

        for ($z = 0; $z < data.length; $z++) 
        { 
         //console.log(data[$z]) 
         $("#mytable").append("<tr><td>" + 
          data[$z]['test1'] + "</td><td>" + 
          data[$z]['test2'] + "</td><td>" + 
          data[$z]['test3'] + "</td><td>" + 
          data[$z]['test4'] + "</td><td>" + 
          data[$z]['test5'] + "</td><td>" + 
          data[$z]['test6'] + "</td><td>"+ 
          data[$z]['test7'] + "</td><td>" + 
          data[$z]['test8'] + "</td><td>" + 
          data[$z]['test9'] + "</td></tr>"); 
        } 
        $("#mytable").append("</tbody>"); 
       }); 
       initialise(); 
      }); 
      function initialise() 
      { 
       $("#mytable").tablesorter({ 
        theme : 'default', 
        widgets : ['zebra','columns'], 
        debug : true 
       }); 
      } 
     </script> 
</head> 
    <body> 
     <div id="topdiv"> 
      <table id="mytable" class="tablesorter"> 
      </table> 
     </div> 
    </body> 
</html>

任何人只要有幫助呢？

來源

2014-02-22 uncle-junky

查看build table widget。它實際上並不是一個小部件，但它會自動爲您創建一個表格。

默認情況下，它接受JSON，看起來像這樣：

{ 
    "headers" : [ 
    [ 
     { "text": "First Name", "class": "fname", "width": "20%" }, 
     "Last Name", 
     { "text": "Age", "class": "age", "data-sorter" : false }, 
     "Total", 
     { "text": "Discount", "class" : "sorter-false" }, 
     { "text": "Date", "class" : "date" } 
    ] 
    ], 
    "footers" : "clone", 
    "rows" : [ 
    [ "Peter", "Parker", 28, "$9.99", "20%", "Jul 6, 2006 8:14 AM" ], 
    [ "John", "Hood", 33, "$19.99", "25%", "Dec 10, 2002 5:14 AM" ], 
    [ "Clark", "Kent", 18, "$15.89", "44%", "Jan 12, 2003 11:14 AM" ], 

    { "newTbody": true, "class": "tablesorter-infoOnly" }, 
    { "cells" : [ { "html": "<strong>JSON Info Row</strong>", "colspan": 6 } ] }, 

    { "newTbody" : true }, 
    [ "Bruce", "Evans", 22, "$13.19", "11%", "Jan 18, 2007 9:12 AM" ], 
    [ "Bruce", "Almighty", 45, "$153.19", "44%", "Jan 18, 2001 9:12 AM" ], 

    { "class": "specialRow", 
     "cells" : [ 
     { "text": "Fred", "class": "fname" }, 
     { "text": "Smith", "class": "lname" }, 
     { "text": 18, "class": "age", "data-info": "fake ID!, he's only 16" }, 
     { "text": "$22.44", "class": "total" }, 
     "8%", 
     { "text": "Aug 20, 2012 10:15 AM", "class": "date" } 
     ], 
     "data-info" : "This row likes turtles" 
    } 
    ] 
}

來源

2014-02-22 23:12:22 Mottie

你如何建立一個具體的結構JSON？ –

好了，現在我已經手動編寫了PHP來構建JSON的這種特定結構，但現在，只有當我在瀏覽器中調用腳本時，返回的JSON文件纔會加載反斜槓。這有助於加載... –

看看[我的回答這個問題]（http://stackoverflow.com/questions/21972629/tablesorter-pager-plugin-ajax-with-child-rows）...基本上你的JSON可以包含HTML標記。 – Mottie

使用.getJson構建動態表

回答

相關問題