How to populate data in a table using jquery datatable
Question
Is it possible to populate data in a table using jQuery DataTable? For example if I type Tokyo in the search box, the table will display all the related data. 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 answers
solution1
0 2015-12-10 01:19:17
DataTable has a special table that just do what you want:
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.
solution2
0 ACCPTED 2015-12-10 18:38:55
Yes it is possible to populate data in a 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. 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.
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') );
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.