2014-04-14 68 views
0

我想爲我的數據表中的ajax源數據執行行分組。 這是我的代碼的HTML: -http://datatables.net/tn/3:無法重新初始化數據表

<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.0-beta.2/css/jquery.dataTables.css"> 
    <link rel="stylesheet" type="text/css" href="NewFile.css"> 
</head> 
<body> 
<table id="example" class="display" cellspacing="0" width="100%"> 
     <thead> 
      <tr> 
       <th>Name</th> 
       <th>Position</th> 
       <th>Office</th> 
       <th>Age</th> 
       <th>Start date</th> 
       <th>Salary</th> 
      </tr> 
     </thead> 

     <tfoot> 
      <tr> 
       <th>Name</th> 
       <th>Position</th> 
       <th>Office</th> 
       <th>Age</th> 
       <th>Start date</th> 
       <th>Salary</th> 
      </tr> 
     </tfoot> 


    </table> 
    <script type="text/javascript" charset="utf8" src="//code.jquery.com/jquery-1.10.2.min.js"></script> 
    <script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.0-beta.2/js/jquery.dataTables.js"></script> 
    <script> 
    $(document).ready(function() { 
     $('#example').dataTable({ 
      "ajax": 'arrays.txt' 
     }); 
    }); 
    </script> 
    <script> 

    </script> 
    <script> 
    $(document).ready(function() { 
     var table = $('#example').DataTable({ 
      "columnDefs": [ 
       { "visible": false, "targets": 2 } 
      ], 
      "order": [[ 2, 'asc' ]], 
      "displayLength": 25, 
      "drawCallback": function (settings) { 
       var api = this.api(); 
       var rows = api.rows({page:'current'}).nodes(); 
       var last=null; 

       api.column(2, {page:'current'}).data().each(function (group, i) { 
        if (last !== group) { 
         $(rows).eq(i).before(
          '<tr class="group"><td colspan="5">'+group+'</td></tr>' 
         ); 

         last = group; 
        } 
       }); 
      } 
     }); 

     // Order by the grouping 
     $('#example tbody').on('click', 'tr.group', function() { 
      var currentOrder = table.order()[0]; 
      if (currentOrder[0] === 2 && currentOrder[1] === 'asc') { 
       table.order([ 2, 'desc' ]).draw(); 
      } 
      else { 
       table.order([ 2, 'asc' ]).draw(); 
      } 
     }); 
    }); 

    </script> 
    </body> 
    </html> 

,這是我的ajax arrays.txt文件: -

{ 
    "data": [ 
    [ 
     "Tiger Nixon", 
     "System Architect", 
     "Edinburgh", 
     "5421", 
     "2011/04/25", 
     "$320,800" 
    ], 
    [ 
     "Garrett Winters", 
     "Accountant", 
     "Tokyo", 
     "8422", 
     "2011/07/25", 
     "$170,750" 
    ], 
    [ 
     "Ashton Cox", 
     "Junior Technical Author", 
     "San Francisco", 
     "1562", 
     "2009/01/12", 
     "$86,000" 
    ], 
    [ 
     "Cedric Kelly", 
     "Senior Javascript Developer", 
     "Edinburgh", 
     "6224", 
     "2012/03/29", 
     "$433,060" 
    ], 
    [ 
     "Airi Satou", 
     "Accountant", 
     "Tokyo", 
     "5407", 
     "2008/11/28", 
     "$162,700" 
    ], 
    [ 
     "Brielle Williamson", 
     "Integration Specialist", 
     "New York", 
     "4804", 
     "2012/12/02", 
     "$372,000" 
    ], 
    [ 
     "Herrod Chandler", 
     "Sales Assistant", 
     "San Francisco", 
     "9608", 
     "2012/08/06", 
     "$137,500" 
    ], 
    [ 
     "Rhona Davidson", 
     "Integration Specialist", 
     "Tokyo", 
     "6200", 
     "2010/10/14", 
     "$327,900" 
    ], 
    [ 
     "Colleen Hurst", 
     "Javascript Developer", 
     "San Francisco", 
     "2360", 
     "2009/09/15", 
     "$205,500" 
    ], 
    [ 
     "Sonya Frost", 
     "Software Engineer", 
     "Edinburgh", 
     "1667", 
     "2008/12/13", 
     "$103,600" 
    ], 
    [ 
     "Jena Gaines", 
     "Office Manager", 
     "London", 
     "3814", 
     "2008/12/19", 
     "$90,560" 
    ], 
    [ 
     "Quinn Flynn", 
     "Support Lead", 
     "Edinburgh", 
     "9497", 
     "2013/03/03", 
     "$342,000" 
    ], 
    [ 
     "Charde Marshall", 
     "Regional Director", 
     "San Francisco", 
     "6741", 
     "2008/10/16", 
     "$470,600" 
    ], 
    [ 
     "Haley Kennedy", 
     "Senior Marketing Designer", 
     "London", 
     "3597", 
     "2012/12/18", 
     "$313,500" 
    ], 
    [ 
     "Tatyana Fitzpatrick", 
     "Regional Director", 
     "London", 
     "1965", 
     "2010/03/17", 
     "$385,750" 
    ], 
    [ 
     "Michael Silva", 
     "Marketing Designer", 
     "London", 
     "1581", 
     "2012/11/27", 
     "$198,500" 
    ], 
    [ 
     "Paul Byrd", 
     "Chief Financial Officer (CFO)", 
     "New York", 
     "3059", 
     "2010/06/09", 
     "$725,000" 
    ], 
    [ 
     "Gloria Little", 
     "Systems Administrator", 
     "New York", 
     "1721", 
     "2009/04/10", 
     "$237,500" 
    ], 
    [ 
     "Bradley Greer", 
     "Software Engineer", 
     "London", 
     "2558", 
     "2012/10/13", 
     "$132,000" 
    ], 
    [ 
     "Dai Rios", 
     "Personnel Lead", 
     "Edinburgh", 
     "2290", 
     "2012/09/26", 
     "$217,500" 
    ], 
    [ 
     "Jenette Caldwell", 
     "Development Lead", 
     "New York", 
     "1937", 
     "2011/09/03", 
     "$345,000" 
    ], 
    [ 
     "Yuri Berry", 
     "Chief Marketing Officer (CMO)", 
     "New York", 
     "6154", 
     "2009/06/25", 
     "$675,000" 
    ], 
    [ 
     "Caesar Vance", 
     "Pre-Sales Support", 
     "New York", 
     "8330", 
     "2011/12/12", 
     "$106,450" 
    ], 
    [ 
     "Doris Wilder", 
     "Sales Assistant", 
     "Sidney", 
     "3023", 
     "2010/09/20", 
     "$85,600" 
    ], 
    [ 
     "Angelica Ramos", 
     "Chief Executive Officer (CEO)", 
     "London", 
     "5797", 
     "2009/10/09", 
     "$1,200,000" 
    ], 
    [ 
     "Gavin Joyce", 
     "Developer", 
     "Edinburgh", 
     "8822", 
     "2010/12/22", 
     "$92,575" 
    ], 
    [ 
     "Jennifer Chang", 
     "Regional Director", 
     "Singapore", 
     "9239", 
     "2010/11/14", 
     "$357,650" 
    ], 
    [ 
     "Brenden Wagner", 
     "Software Engineer", 
     "San Francisco", 
     "1314", 
     "2011/06/07", 
     "$206,850" 
    ], 
    [ 
     "Fiona Green", 
     "Chief Operating Officer (COO)", 
     "San Francisco", 
     "2947", 
     "2010/03/11", 
     "$850,000" 
    ], 
    [ 
     "Shou Itou", 
     "Regional Marketing", 
     "Tokyo", 
     "8899", 
     "2011/08/14", 
     "$163,000" 
    ], 
    [ 
     "Michelle House", 
     "Integration Specialist", 
     "Sidney", 
     "2769", 
     "2011/06/02", 
     "$95,400" 
    ], 
    [ 
     "Suki Burks", 
     "Developer", 
     "London", 
     "6832", 
     "2009/10/22", 
     "$114,500" 
    ], 
    [ 
     "Prescott Bartlett", 
     "Technical Author", 
     "London", 
     "3606", 
     "2011/05/07", 
     "$145,000" 
    ], 
    [ 
     "Gavin Cortez", 
     "Team Leader", 
     "San Francisco", 
     "2860", 
     "2008/10/26", 
     "$235,500" 
    ], 
    [ 
     "Martena Mccray", 
     "Post-Sales support", 
     "Edinburgh", 
     "8240", 
     "2011/03/09", 
     "$324,050" 
    ], 
    [ 
     "Unity Butler", 
     "Marketing Designer", 
     "San Francisco", 
     "5384", 
     "2009/12/09", 
     "$85,675" 
    ], 
    [ 
     "Howard Hatfield", 
     "Office Manager", 
     "San Francisco", 
     "7031", 
     "2008/12/16", 
     "$164,500" 
    ], 
    [ 
     "Hope Fuentes", 
     "Secretary", 
     "San Francisco", 
     "6318", 
     "2010/02/12", 
     "$109,850" 
    ], 
    [ 
     "Vivian Harrell", 
     "Financial Controller", 
     "San Francisco", 
     "9422", 
     "2009/02/14", 
     "$452,500" 
    ], 
    [ 
     "Timothy Mooney", 
     "Office Manager", 
     "London", 
     "7580", 
     "2008/12/11", 
     "$136,200" 
    ], 
    [ 
     "Jackson Bradshaw", 
     "Director", 
     "New York", 
     "1042", 
     "2008/09/26", 
     "$645,750" 
    ], 
    [ 
     "Olivia Liang", 
     "Support Engineer", 
     "Singapore", 
     "2120", 
     "2011/02/03", 
     "$234,500" 
    ], 
    [ 
     "Bruno Nash", 
     "Software Engineer", 
     "London", 
     "6222", 
     "2011/05/03", 
     "$163,500" 
    ], 
    [ 
     "Sakura Yamamoto", 
     "Support Engineer", 
     "Tokyo", 
     "9383", 
     "2009/08/19", 
     "$139,575" 
    ], 
    [ 
     "Thor Walton", 
     "Developer", 
     "New York", 
     "8327", 
     "2013/08/11", 
     "$98,540" 
    ], 
    [ 
     "Finn Camacho", 
     "Support Engineer", 
     "San Francisco", 
     "2927", 
     "2009/07/07", 
     "$87,500" 
    ], 
    [ 
     "Serge Baldwin", 
     "Data Coordinator", 
     "Singapore", 
     "8352", 
     "2012/04/09", 
     "$138,575" 
    ], 
    [ 
     "Zenaida Frank", 
     "Software Engineer", 
     "New York", 
     "7439", 
     "2010/01/04", 
     "$125,250" 
    ], 
    [ 
     "Zorita Serrano", 
     "Software Engineer", 
     "San Francisco", 
     "4389", 
     "2012/06/01", 
     "$115,000" 
    ], 
    [ 
     "Jennifer Acosta", 
     "Junior Javascript Developer", 
     "Edinburgh", 
     "3431", 
     "2013/02/01", 
     "$75,650" 
    ], 
    [ 
     "Cara Stevens", 
     "Sales Assistant", 
     "New York", 
     "3990", 
     "2011/12/06", 
     "$145,600" 
    ], 
    [ 
     "Hermione Butler", 
     "Regional Director", 
     "London", 
     "1016", 
     "2011/03/21", 
     "$356,250" 
    ], 
    [ 
     "Lael Greer", 
     "Systems Administrator", 
     "London", 
     "6733", 
     "2009/02/27", 
     "$103,500" 
    ], 
    [ 
     "Jonas Alexander", 
     "Developer", 
     "San Francisco", 
     "8196", 
     "2010/07/14", 
     "$86,500" 
    ], 
    [ 
     "Shad Decker", 
     "Regional Director", 
     "Edinburgh", 
     "6373", 
     "2008/11/13", 
     "$183,000" 
    ], 
    [ 
     "Michael Bruce", 
     "Javascript Developer", 
     "Singapore", 
     "5384", 
     "2011/06/27", 
     "$183,000" 
    ], 
    [ 
     "Donna Snider", 
     "Customer Support", 
     "New York", 
     "4226", 
     "2011/01/25", 
     "$112,000" 
    ] 
    ] 
} 

當我嘗試運行,我得到錯誤信息數據表警告:表id = example-不能重新初始化數據表。有關此錯誤的更多信息,請參見http://datatables.net/tn/3 那麼錯誤在哪裏?

******************************************* UPDATE * ***************************************

現在,如果我俱樂部2 javascript代碼,我沒有得到錯誤,數據表被填充,但行分組沒有發生。那麼現在我的錯誤在哪裏?請幫忙 !!!!我的代碼: -

<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.0-beta.2/css/jquery.dataTables.css"> 
    <link rel="stylesheet" type="text/css" href="NewFile.css"> 
</head> 
<body> 
<table id="example" class="display" cellspacing="0" width="100%"> 
     <thead> 
      <tr> 
       <th>SECTION</th> 
       <th>REPORT NAME</th> 
       <th>CONTACT PERSON</th> 
       <th>LINK TO DOWNLOAD</th> 
       <th>METRICS</th> 
       <th>Salary</th> 
      </tr> 
     </thead> 

     <tfoot> 
      <tr> 
       <th>Name</th> 
       <th>Position</th> 
       <th>Office</th> 
       <th>Age</th> 
       <th>Start date</th> 
       <th>Salary</th> 
      </tr> 
     </tfoot> 


    </table> 
    <script type="text/javascript" charset="utf8" src="//code.jquery.com/jquery-1.10.2.min.js"></script> 
    <script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.0-beta.2/js/jquery.dataTables.js"></script> 
    <!-- <script> 
    $(document).ready(function() { 
     $('#example').dataTable({ 
      "ajax": 'arrays.txt' 
     }); 
    <!-- }); 
    </script> 
    <script> 

    </script> --> 
    <script> 
    $(document).ready(function() { 
     $('#example').dataTable({ 
      "ajax": 'arrays.txt' 
     }); 
     table.destroy(); 
     var table = $('#example').DataTable({ 
      "columnDefs": [ 
       { "visible": false, "targets": 2 } 
      ], 
      "order": [[ 2, 'asc' ]], 
      "displayLength": 25, 
      "drawCallback": function (settings) { 
       var api = this.api(); 
       var rows = api.rows({page:'current'}).nodes(); 
       var last=null; 

       api.column(2, {page:'current'}).data().each(function (group, i) { 
        if (last !== group) { 
         $(rows).eq(i).before(
          '<tr class="group"><td colspan="5">'+group+'</td></tr>' 
         ); 

         last = group; 
        } 
       }); 
      } 
     }); 

     // Order by the grouping 
     $('#example tbody').on('click', 'tr.group', function() { 
      var currentOrder = table.order()[0]; 
      if (currentOrder[0] === 2 && currentOrder[1] === 'asc') { 
       table.order([ 2, 'desc' ]).draw(); 
      } 
      else { 
       table.order([ 2, 'asc' ]).draw(); 
      } 
     }); 
    }); 

    </script> 
    </body> 
    </html> 

回答

0

它的tn/3消息是因爲您嘗試並初始化同一個表兩次。嘗試使用與其他函數相同的函數進行數據加載。類似這樣的:

$(document).ready(function() { 
    table = $('#example').DataTable({ 
     "ajax": "arrays.txt", 
     "columnDefs": [ 
      { "visible": false, "targets": 2 } 
     ], 
     "order": [[ 2, 'asc' ]], 
     "displayLength": 25, 
     "drawCallback": function (settings) { 
      var api = this.api(); 
      var rows = api.rows({page:'current'}).nodes(); 
      var last=null; 

      api.column(2, {page:'current'}).data().each(function (group, i) { 
       if (last !== group) { 
        $(rows).eq(i).before(
         '<tr class="group"><td colspan="5">'+group+'</td></tr>' 
        ); 

        last = group; 
       } 
      }); 
     } 
    }); 

    // Order by the grouping 
    $('#example tbody').on('click', 'tr.group', function() { 
     var currentOrder = table.order()[0]; 
     if (currentOrder[0] === 2 && currentOrder[1] === 'asc') { 
      table.order([ 2, 'desc' ]).draw(); 
     } 
     else { 
      table.order([ 2, 'asc' ]).draw(); 
     } 
    }); 
});