如何使用jQuery數據表填充表中的數據

是否可以使用jQuery DataTable填充表中的數據？例如，如果我在搜索框中鍵入東京，表格將顯示所有相關數據。但是如果我只想看到名稱，位置，開始日期等，我應該使用什麼命令或函數呢？如何使用jQuery數據表填充表中的數據

$(function() { 
 
    $("#datatable").dataTable() 
 
});

<html xmlns="http://www.w3.org/1999/xhtml"> 
 

 
<head> 
 
</head> 
 

 
<body> 
 
    <link href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css" rel="stylesheet" /> 
 
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script> 
 
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script> 
 

 
    <table id="datatable" 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> 
 
    <tbody> 
 
     <tr> 
 
     <td>Yorgesh Warren</td> 
 
     <td>Accountant</td> 
 
     <td>Tokyo</td> 
 
     <td>33</td> 
 
     <td>2008/11/28</td> 
 
     <td>$162,700</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Macklyn Ranti</td> 
 
     <td>Integration Specialist</td> 
 
     <td>New York</td> 
 
     <td>61</td> 
 
     <td>2012/12/02</td> 
 
     <td>$372,000</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Rusli Qhattar</td> 
 
     <td>Sales Assistant</td> 
 
     <td>San Francisco</td> 
 
     <td>59</td> 
 
     <td>2012/08/06</td> 
 
     <td>$137,500</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Vivian Lee</td> 
 
     <td>Integration Specialist</td> 
 
     <td>Tokyo</td> 
 
     <td>55</td> 
 
     <td>2010/10/14</td> 
 
     <td>$327,900</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Colleen Hurst</td> 
 
     <td>Javascript Developer</td> 
 
     <td>San Francisco</td> 
 
     <td>39</td> 
 
     <td>2009/09/15</td> 
 
     <td>$205,500</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Sonya Frost</td> 
 
     <td>Software Engineer</td> 
 
     <td>Edinburgh</td> 
 
     <td>23</td> 
 
     <td>2008/12/13</td> 
 
     <td>$103,600</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Jena Gaines</td> 
 
     <td>Office Manager</td> 
 
     <td>London</td> 
 
     <td>30</td> 
 
     <td>2008/12/19</td> 
 
     <td>$90,560</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Quinn Flynn</td> 
 
     <td>Support Lead</td> 
 
     <td>Edinburgh</td> 
 
     <td>22</td> 
 
     <td>2013/03/03</td> 
 
     <td>$342,000</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Charde Marshall</td> 
 
     <td>Regional Director</td> 
 
     <td>San Francisco</td> 
 
     <td>36</td> 
 
     <td>2008/10/16</td> 
 
     <td>$470,600</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Haley Kennedy</td> 
 
     <td>Senior Marketing Designer</td> 
 
     <td>London</td> 
 
     <td>43</td> 
 
     <td>2012/12/18</td> 
 
     <td>$313,500</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Tatyana Fitzpatrick</td> 
 
     <td>Regional Director</td> 
 
     <td>London</td> 
 
     <td>19</td> 
 
     <td>2010/03/17</td> 
 
     <td>$385,750</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Michael Silva</td> 
 
     <td>Marketing Designer</td> 
 
     <td>London</td> 
 
     <td>66</td> 
 
     <td>2012/11/27</td> 
 
     <td>$198,500</td> 
 
     </tr> 
 
    </tbody> 
 
    </table>

來源

2015-12-10 noname

是的，可以在jQuery DataTable中填充數據。您沒有提供您使用的所有JavaScript，但是您需要添加比您提供的更多的JavaScript代碼。在示例Show/hide columns dynamically中，他們添加了一個.on('click', function()，嘗試添加他們擁有的所有代碼，這應該可以幫助您。要使切換列正常工作，請確保您在HTML和JavaScript中具有以下代碼。

HTML：

Toggle column: <a class="toggle-vis" data-column="0">Name</a> - 
<a class="toggle-vis" data-column="1"> Position</a> - 
<a class="toggle-vis" data-column= "2"> Office</a> - 
<a class="toggle-vis" data-column="3"> Age</a> - 
<a class="toggle-vis" data-column="4"> Start date</a> - 
<a class="toggle-vis" data-column= "5">Salary</a>

的JavaScript：

// Get the column API object 
     var column = table.column($(this).attr('data-column'));

來源

2015-12-10 18:38:55 Jay113

我試過這些代碼，但是如何鏈接表格中的「切換列」與列？我對這個數據表是新的。感謝你的回答。 – noname

我已經更新了我的答案，以顯示如何將「切換列」與表格中的列「鏈接」的HTML部分。 – Jay113

你能解決你的問題嗎？如果是這樣，請接受我的回答。乾杯☺ – Jay113

DataTable中有一個特殊的表，只是做你想要什麼：

https://datatables.net/examples/api/multi_filter.html

請，你一直在這裏歡迎，但問quetion之前，你首先應該做的一些谷歌搜索自己。

來源

2015-12-10 01:19:17 Franco

我使用這些功能。但它似乎不適合我。我想要做的更多的是https://datatables.net/examples/api/show_hide.html，而且它不工作。 – noname

如何使用jQuery數據表填充表中的數據

回答

相關問題