如何使用jQuery DataTable填充表中的数据
[英]How to populate data in a table using jquery datatable
问题描述
Is it possible to populate data in a table using jQuery DataTable? 
是否可以使用jQuery DataTable填充表中的数据？ For example if I type Tokyo in the search box, the table will display all the related data. 例如，如果我在搜索框中键入Tokyo，则该表将显示所有相关数据。 but what if I only want to see the name, position, start date, etc., what command or function should i use? 但是，如果我只想查看名称，位置，开始日期等，该怎么使用？
$(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>
2 个解决方案
解决方案1
0 2015-12-10 01:19:17
DataTable has a special table that just do what you want: DataTable有一个特殊的表，可以满足您的需求：
https://datatables.net/examples/api/multi_filter.html https://datatables.net/examples/api/multi_filter.html
Please, you are always welcome here, but before asking quetion you should first do some googling yourself. 拜托，我们在这里总是很欢迎您，但是在提出疑问之前，您应该先做一下谷歌搜索。
解决方案2
0 已采纳 2015-12-10 18:38:55
Yes it is possible to populate data in a jQuery DataTable. 是的，可以在jQuery DataTable中填充数据。 You did not provide all of the JavaScript that you used, however you will need to add more JavaScript code than what you provided. 您并未提供所有使用的JavaScript，但是您将需要添加比提供的JavaScript代码更多的JavaScript代码。 In the example Show / hide columns dynamically they added a .on('click', function() , try adding all of the code they have to yours and that should help you out. To make the toggle column work make sure you have the following code in HTML and JavaScript. 在示例“ 显示/隐藏列”中，他们动态添加了.on('click', function() ，尝试将所有.on('click', function()的代码添加到您的代码中，这将对您有所帮助。以下HTML和JavaScript代码。
HTML: 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: JavaScript的：
// Get the column API object
var column = table.column( $(this).attr('data-column') );
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.