都知道jquery datatable是很强大的js库。但原有的搜索模式是响应keypress的，虽然服务端模式是400ms延迟，但仍然会给服务器造成很大负担。
图1，原有样子：
图2：改变后的样子：
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <!-- Meta, title, CSS, favicons, etc. --> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>DataTables | Gentelella</title> <!-- Bootstrap --> <link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- Font Awesome --> <link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet"> <!-- NProgress --> <link href="../vendors/nprogress/nprogress.css" rel="stylesheet"> <!-- iCheck --> <link href="../vendors/iCheck/skins/flat/green.css" rel="stylesheet"> <!-- Datatables --> <link href="../vendors/datatables.net-bs/css/dataTables.bootstrap.min.css" rel="stylesheet"> <link href="../vendors/datatables.net-buttons-bs/css/buttons.bootstrap.min.css" rel="stylesheet"> <link href="../vendors/datatables.net-fixedheader-bs/css/fixedHeader.bootstrap.min.css" rel="stylesheet"> <link href="../vendors/datatables.net-responsive-bs/css/responsive.bootstrap.min.css" rel="stylesheet"> <link href="../vendors/datatables.net-scroller-bs/css/scroller.bootstrap.min.css" rel="stylesheet"> <!-- Custom Theme Style --> <link href="../build/css/custom.min.css" rel="stylesheet"> </head> <body class="nav-md"> <div class="container body"> <div class="main_container"> <div class="col-md-3 left_col"> <div class="left_col scroll-view"> <div class="navbar nav_title" style="border: 0;"> <a href="index.html" class="site_title"><i class="fa fa-paw"></i> <span>Gentelella Alela!</span></a> </div> <div class="clearfix"></div> <!-- menu profile quick info --> <div class="profile clearfix"> <div class="profile_pic"> <img src="images/img.jpg" alt="..." class="img-circle profile_img"> </div> <div class="profile_info"> <span>Welcome,</span> <h2>John Doe</h2> </div> </div> <!-- /menu profile quick info --> <br /> <!-- sidebar menu --> <div id="sidebar-menu" class="main_menu_side hidden-print main_menu"> <div class="menu_section"> <h3>General</h3> <ul class="nav side-menu"> <li><a><i class="fa fa-home"></i> Home <span class="fa fa-chevron-down"></span></a> <ul class="nav child_menu"> <li><a href="index.html">Dashboard</a></li> <li><a href="index2.html">Dashboard2</a></li> <li><a href="index3.html">Dashboard3</a></li> </ul> </li> <li><a><i class="fa fa-edit"></i> Forms <span class="fa fa-chevron-down"></span></a> <ul class="nav child_menu"> <li><a href="form.html">General Form</a></li> <li><a href="form_advanced.html">Advanced Components</a></li> <li><a href="form_validation.html">Form Validation</a></li> <li><a href="form_wizards.html">Form Wizard</a></li> <li><a href="form_upload.html">Form Upload</a></li> <li><a href="form_buttons.html">Form Buttons</a></li> </ul> </li> <li><a><i class="fa fa-desktop"></i> UI Elements <span class="fa fa-chevron-down"></span></a> <ul class="nav child_menu"> <li><a href="general_elements.html">General Elements</a></li> <li><a href="media_gallery.html">Media Gallery</a></li> <li><a href="typography.html">Typography</a></li> <li><a href="icons.html">Icons</a></li> <li><a href="glyphicons.html">Glyphicons</a></li> <li><a href="widgets.html">Widgets</a></li> <li><a href="invoice.html">Invoice</a></li> <li><a href="inbox.html">Inbox</a></li> <li><a href="calendar.html">Calendar</a></li> </ul> </li> <li><a><i class="fa fa-table"></i> Tables <span class="fa fa-chevron-down"></span></a> <ul class="nav child_menu"> <li><a href="tables.html">Tables</a></li> <li><a href="tables_dynamic.html">Table Dynamic</a></li> </ul> </li> <li><a><i class="fa fa-bar-chart-o"></i> Data Presentation <span class="fa fa-chevron-down"></span></a> <ul class="nav child_menu"> <li><a href="chartjs.html">Chart JS</a></li> <li><a href="chartjs2.html">Chart JS2</a></li> <li><a href="morisjs.html">Moris JS</a></li> <li><a href="echarts.html">ECharts</a></li> <li><a href="other_charts.html">Other Charts</a></li> </ul> </li> <li><a><i class="fa fa-clone"></i>Layouts <span class="fa fa-chevron-down"></span></a> <ul class="nav child_menu"> <li><a href="fixed_sidebar.html">Fixed Sidebar</a></li> <li><a href="fixed_footer.html">Fixed Footer</a></li> </ul> </li> </ul> </div> <div class="menu_section"> <h3>Live On</h3> <ul class="nav side-menu"> <li><a><i class="fa fa-bug"></i> Additional Pages <span class="fa fa-chevron-down"></span></a> <ul class="nav child_menu"> <li><a href="e_commerce.html">E-commerce</a></li> <li><a href="projects.html">Projects</a></li> <li><a href="project_detail.html">Project Detail</a></li> <li><a href="contacts.html">Contacts</a></li> <li><a href="profile.html">Profile</a></li> </ul> </li> <li><a><i class="fa fa-windows"></i> Extras <span class="fa fa-chevron-down"></span></a> <ul class="nav child_menu"> <li><a href="page_403.html">403 Error</a></li> <li><a href="page_404.html">404 Error</a></li> <li><a href="page_500.html">500 Error</a></li> <li><a href="plain_page.html">Plain Page</a></li> <li><a href="login.html">Login Page</a></li> <li><a href="pricing_tables.html">Pricing Tables</a></li> </ul> </li> <li><a><i class="fa fa-sitemap"></i> Multilevel Menu <span class="fa fa-chevron-down"></span></a> <ul class="nav child_menu"> <li><a href="#level1_1">Level One</a> <li><a>Level One<span class="fa fa-chevron-down"></span></a> <ul class="nav child_menu"> <li class="sub_menu"><a href="level2.html">Level Two</a> </li> <li><a href="#level2_1">Level Two</a> </li> <li><a href="#level2_2">Level Two</a> </li> </ul> </li> <li><a href="#level1_2">Level One</a> </li> </ul> </li> <li><a href="javascript:void(0)"><i class="fa fa-laptop"></i> Landing Page <span class="label label-success pull-right">Coming Soon</span></a></li> </ul> </div> </div> <!-- /sidebar menu --> <!-- /menu footer buttons --> <div class="sidebar-footer hidden-small"> <a data-toggle="tooltip" data-placement="top" title="Settings"> <span class="glyphicon glyphicon-cog" aria-hidden="true"></span> </a> <a data-toggle="tooltip" data-placement="top" title="FullScreen"> <span class="glyphicon glyphicon-fullscreen" aria-hidden="true"></span> </a> <a data-toggle="tooltip" data-placement="top" title="Lock"> <span class="glyphicon glyphicon-eye-close" aria-hidden="true"></span> </a> <a data-toggle="tooltip" data-placement="top" title="Logout" href="login.html"> <span class="glyphicon glyphicon-off" aria-hidden="true"></span> </a> </div> <!-- /menu footer buttons --> </div> </div> <!-- top navigation --> <div class="top_nav"> <div class="nav_menu"> <nav> <div class="nav toggle"> <a id="menu_toggle"><i class="fa fa-bars"></i></a> </div> <ul class="nav navbar-nav navbar-right"> <li class=""> <a href="javascript:;" class="user-profile dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <img src="images/img.jpg" alt="">John Doe <span class=" fa fa-angle-down"></span> </a> <ul class="dropdown-menu dropdown-usermenu pull-right"> <li><a href="javascript:;"> Profile</a></li> <li> <a href="javascript:;"> <span class="badge bg-red pull-right">50%</span> <span>Settings</span> </a> </li> <li><a href="javascript:;">Help</a></li> <li><a href="login.html"><i class="fa fa-sign-out pull-right"></i> Log Out</a></li> </ul> </li> <li role="presentation" class="dropdown"> <a href="javascript:;" class="dropdown-toggle info-number" data-toggle="dropdown" aria-expanded="false"> <i class="fa fa-envelope-o"></i> <span class="badge bg-green">6</span> </a> <ul id="menu1" class="dropdown-menu list-unstyled msg_list" role="menu"> <li> <a> <span class="image"><img src="images/img.jpg" alt="Profile Image" /></span> <span> <span>John Smith</span> <span class="time">3 mins ago</span> </span> <span class="message"> Film festivals used to be do-or-die moments for movie makers. They were where... </span> </a> </li> <li> <a> <span class="image"><img src="images/img.jpg" alt="Profile Image" /></span> <span> <span>John Smith</span> <span class="time">3 mins ago</span> </span> <span class="message"> Film festivals used to be do-or-die moments for movie makers. They were where... </span> </a> </li> <li> <a> <span class="image"><img src="images/img.jpg" alt="Profile Image" /></span> <span> <span>John Smith</span> <span class="time">3 mins ago</span> </span> <span class="message"> Film festivals used to be do-or-die moments for movie makers. They were where... </span> </a> </li> <li> <a> <span class="image"><img src="images/img.jpg" alt="Profile Image" /></span> <span> <span>John Smith</span> <span class="time">3 mins ago</span> </span> <span class="message"> Film festivals used to be do-or-die moments for movie makers. They were where... </span> </a> </li> <li> <div class="text-center"> <a> <strong>See All Alerts</strong> <i class="fa fa-angle-right"></i> </a> </div> </li> </ul> </li> </ul> </nav> </div> </div> <!-- /top navigation --> <!-- page content --> <div class="right_col" role="main"> <div class=""> <div class="page-title"> <div class="title_left"> <h3>Users <small>Some examples to get you started</small></h3> </div> <div class="title_right"> </div> </div> <div class="clearfix"></div> <div class="row"> <div class="col-md-12 col-sm-12 col-xs-12"> <div class="x_panel"> <div class="x_title"> <h2>Responsive example<small>Users</small></h2> <ul class="nav navbar-right panel_toolbox"> <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Settings 1</a> </li> <li><a href="#">Settings 2</a> </li> </ul> </li> <li><a class="close-link"><i class="fa fa-close"></i></a> </li> </ul> <div class="clearfix"></div> </div> <div class="x_content"> <p class="text-muted font-13 m-b-30"> Responsive is an extension for DataTables that resolves that problem by optimising the table's layout for different screen sizes through the dynamic insertion and removal of columns from the table. </p> <table id="datatable-responsive" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%"> <thead> <tr> <th>First name</th> <th>Last name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> <th>Extn.</th> <th>E-mail</th> </tr> </thead> <tbody> <tr> <td>Tiger</td> <td>Nixon</td> <td>System Architect</td> <td>Edinburgh</td> <td>61</td> <td>2011/04/25</td> <td>$320,800</td> <td>5421</td> <td>t.nixon@datatables.net</td> </tr> <tr> <td>Garrett</td> <td>Winters</td> <td>Accountant</td> <td>Tokyo</td> <td>63</td> <td>2011/07/25</td> <td>$170,750</td> <td>8422</td> <td>g.winters@datatables.net</td> </tr> <tr> <td>Ashton</td> <td>Cox</td> <td>Junior Technical Author</td> <td>San Francisco</td> <td>66</td> <td>2009/01/12</td> <td>$86,000</td> <td>1562</td> <td>a.cox@datatables.net</td> </tr> <tr> <td>Cedric</td> <td>Kelly</td> <td>Senior Javascript Developer</td> <td>Edinburgh</td> <td>22</td> <td>2012/03/29</td> <td>$433,060</td> <td>6224</td> <td>c.kelly@datatables.net</td> </tr> <tr> <td>Airi</td> <td>Satou</td> <td>Accountant</td> <td>Tokyo</td> <td>33</td> <td>2008/11/28</td> <td>$162,700</td> <td>5407</td> <td>a.satou@datatables.net</td> </tr> <tr> <td>Brielle</td> <td>Williamson</td> <td>Integration Specialist</td> <td>New York</td> <td>61</td> <td>2012/12/02</td> <td>$372,000</td> <td>4804</td> <td>b.williamson@datatables.net</td> </tr> <tr> <td>Herrod</td> <td>Chandler</td> <td>Sales Assistant</td> <td>San Francisco</td> <td>59</td> <td>2012/08/06</td> <td>$137,500</td> <td>9608</td> <td>h.chandler@datatables.net</td> </tr> <tr> <td>Rhona</td> <td>Davidson</td> <td>Integration Specialist</td> <td>Tokyo</td> <td>55</td> <td>2010/10/14</td> <td>$327,900</td> <td>6200</td> <td>r.davidson@datatables.net</td> </tr> <tr> <td>Colleen</td> <td>Hurst</td> <td>Javascript Developer</td> <td>San Francisco</td> <td>39</td> <td>2009/09/15</td> <td>$205,500</td> <td>2360</td> <td>c.hurst@datatables.net</td> </tr> <tr> <td>Sonya</td> <td>Frost</td> <td>Software Engineer</td> <td>Edinburgh</td> <td>23</td> <td>2008/12/13</td> <td>$103,600</td> <td>1667</td> <td>s.frost@datatables.net</td> </tr> <tr> <td>Jena</td> <td>Gaines</td> <td>Office Manager</td> <td>London</td> <td>30</td> <td>2008/12/19</td> <td>$90,560</td> <td>3814</td> <td>j.gaines@datatables.net</td> </tr> <tr> <td>Quinn</td> <td>Flynn</td> <td>Support Lead</td> <td>Edinburgh</td> <td>22</td> <td>2013/03/03</td> <td>$342,000</td> <td>9497</td> <td>q.flynn@datatables.net</td> </tr> <tr> <td>Charde</td> <td>Marshall</td> <td>Regional Director</td> <td>San Francisco</td> <td>36</td> <td>2008/10/16</td> <td>$470,600</td> <td>6741</td> <td>c.marshall@datatables.net</td> </tr> <tr> <td>Haley</td> <td>Kennedy</td> <td>Senior Marketing Designer</td> <td>London</td> <td>43</td> <td>2012/12/18</td> <td>$313,500</td> <td>3597</td> <td>h.kennedy@datatables.net</td> </tr> <tr> <td>Tatyana</td> <td>Fitzpatrick</td> <td>Regional Director</td> <td>London</td> <td>19</td> <td>2010/03/17</td> <td>$385,750</td> <td>1965</td> <td>t.fitzpatrick@datatables.net</td> </tr> <tr> <td>Michael</td> <td>Silva</td> <td>Marketing Designer</td> <td>London</td> <td>66</td> <td>2012/11/27</td> <td>$198,500</td> <td>1581</td> <td>m.silva@datatables.net</td> </tr> <tr> <td>Paul</td> <td>Byrd</td> <td>Chief Financial Officer (CFO)</td> <td>New York</td> <td>64</td> <td>2010/06/09</td> <td>$725,000</td> <td>3059</td> <td>p.byrd@datatables.net</td> </tr> <tr> <td>Gloria</td> <td>Little</td> <td>Systems Administrator</td> <td>New York</td> <td>59</td> <td>2009/04/10</td> <td>$237,500</td> <td>1721</td> <td>g.little@datatables.net</td> </tr> <tr> <td>Bradley</td> <td>Greer</td> <td>Software Engineer</td> <td>London</td> <td>41</td> <td>2012/10/13</td> <td>$132,000</td> <td>2558</td> <td>b.greer@datatables.net</td> </tr> <tr> <td>Dai</td> <td>Rios</td> <td>Personnel Lead</td> <td>Edinburgh</td> <td>35</td> <td>2012/09/26</td> <td>$217,500</td> <td>2290</td> <td>d.rios@datatables.net</td> </tr> <tr> <td>Jenette</td> <td>Caldwell</td> <td>Development Lead</td> <td>New York</td> <td>30</td> <td>2011/09/03</td> <td>$345,000</td> <td>1937</td> <td>j.caldwell@datatables.net</td> </tr> <tr> <td>Yuri</td> <td>Berry</td> <td>Chief Marketing Officer (CMO)</td> <td>New York</td> <td>40</td> <td>2009/06/25</td> <td>$675,000</td> <td>6154</td> <td>y.berry@datatables.net</td> </tr> <tr> <td>Caesar</td> <td>Vance</td> <td>Pre-Sales Support</td> <td>New York</td> <td>21</td> <td>2011/12/12</td> <td>$106,450</td> <td>8330</td> <td>c.vance@datatables.net</td> </tr> <tr> <td>Doris</td> <td>Wilder</td> <td>Sales Assistant</td> <td>Sidney</td> <td>23</td> <td>2010/09/20</td> <td>$85,600</td> <td>3023</td> <td>d.wilder@datatables.net</td> </tr> <tr> <td>Angelica</td> <td>Ramos</td> <td>Chief Executive Officer (CEO)</td> <td>London</td> <td>47</td> <td>2009/10/09</td> <td>$1,200,000</td> <td>5797</td> <td>a.ramos@datatables.net</td> </tr> <tr> <td>Gavin</td> <td>Joyce</td> <td>Developer</td> <td>Edinburgh</td> <td>42</td> <td>2010/12/22</td> <td>$92,575</td> <td>8822</td> <td>g.joyce@datatables.net</td> </tr> <tr> <td>Jennifer</td> <td>Chang</td> <td>Regional Director</td> <td>Singapore</td> <td>28</td> <td>2010/11/14</td> <td>$357,650</td> <td>9239</td> <td>j.chang@datatables.net</td> </tr> <tr> <td>Brenden</td> <td>Wagner</td> <td>Software Engineer</td> <td>San Francisco</td> <td>28</td> <td>2011/06/07</td> <td>$206,850</td> <td>1314</td> <td>b.wagner@datatables.net</td> </tr> <tr> <td>Fiona</td> <td>Green</td> <td>Chief Operating Officer (COO)</td> <td>San Francisco</td> <td>48</td> <td>2010/03/11</td> <td>$850,000</td> <td>2947</td> <td>f.green@datatables.net</td> </tr> <tr> <td>Shou</td> <td>Itou</td> <td>Regional Marketing</td> <td>Tokyo</td> <td>20</td> <td>2011/08/14</td> <td>$163,000</td> <td>8899</td> <td>s.itou@datatables.net</td> </tr> <tr> <td>Michelle</td> <td>House</td> <td>Integration Specialist</td> <td>Sidney</td> <td>37</td> <td>2011/06/02</td> <td>$95,400</td> <td>2769</td> <td>m.house@datatables.net</td> </tr> <tr> <td>Suki</td> <td>Burks</td> <td>Developer</td> <td>London</td> <td>53</td> <td>2009/10/22</td> <td>$114,500</td> <td>6832</td> <td>s.burks@datatables.net</td> </tr> <tr> <td>Prescott</td> <td>Bartlett</td> <td>Technical Author</td> <td>London</td> <td>27</td> <td>2011/05/07</td> <td>$145,000</td> <td>3606</td> <td>p.bartlett@datatables.net</td> </tr> <tr> <td>Gavin</td> <td>Cortez</td> <td>Team Leader</td> <td>San Francisco</td> <td>22</td> <td>2008/10/26</td> <td>$235,500</td> <td>2860</td> <td>g.cortez@datatables.net</td> </tr> <tr> <td>Martena</td> <td>Mccray</td> <td>Post-Sales support</td> <td>Edinburgh</td> <td>46</td> <td>2011/03/09</td> <td>$324,050</td> <td>8240</td> <td>m.mccray@datatables.net</td> </tr> <tr> <td>Unity</td> <td>Butler</td> <td>Marketing Designer</td> <td>San Francisco</td> <td>47</td> <td>2009/12/09</td> <td>$85,675</td> <td>5384</td> <td>u.butler@datatables.net</td> </tr> <tr> <td>Howard</td> <td>Hatfield</td> <td>Office Manager</td> <td>San Francisco</td> <td>51</td> <td>2008/12/16</td> <td>$164,500</td> <td>7031</td> <td>h.hatfield@datatables.net</td> </tr> <tr> <td>Hope</td> <td>Fuentes</td> <td>Secretary</td> <td>San Francisco</td> <td>41</td> <td>2010/02/12</td> <td>$109,850</td> <td>6318</td> <td>h.fuentes@datatables.net</td> </tr> <tr> <td>Vivian</td> <td>Harrell</td> <td>Financial Controller</td> <td>San Francisco</td> <td>62</td> <td>2009/02/14</td> <td>$452,500</td> <td>9422</td> <td>v.harrell@datatables.net</td> </tr> <tr> <td>Timothy</td> <td>Mooney</td> <td>Office Manager</td> <td>London</td> <td>37</td> <td>2008/12/11</td> <td>$136,200</td> <td>7580</td> <td>t.mooney@datatables.net</td> </tr> <tr> <td>Jackson</td> <td>Bradshaw</td> <td>Director</td> <td>New York</td> <td>65</td> <td>2008/09/26</td> <td>$645,750</td> <td>1042</td> <td>j.bradshaw@datatables.net</td> </tr> <tr> <td>Olivia</td> <td>Liang</td> <td>Support Engineer</td> <td>Singapore</td> <td>64</td> <td>2011/02/03</td> <td>$234,500</td> <td>2120</td> <td>o.liang@datatables.net</td> </tr> <tr> <td>Bruno</td> <td>Nash</td> <td>Software Engineer</td> <td>London</td> <td>38</td> <td>2011/05/03</td> <td>$163,500</td> <td>6222</td> <td>b.nash@datatables.net</td> </tr> <tr> <td>Sakura</td> <td>Yamamoto</td> <td>Support Engineer</td> <td>Tokyo</td> <td>37</td> <td>2009/08/19</td> <td>$139,575</td> <td>9383</td> <td>s.yamamoto@datatables.net</td> </tr> <tr> <td>Thor</td> <td>Walton</td> <td>Developer</td> <td>New York</td> <td>61</td> <td>2013/08/11</td> <td>$98,540</td> <td>8327</td> <td>t.walton@datatables.net</td> </tr> <tr> <td>Finn</td> <td>Camacho</td> <td>Support Engineer</td> <td>San Francisco</td> <td>47</td> <td>2009/07/07</td> <td>$87,500</td> <td>2927</td> <td>f.camacho@datatables.net</td> </tr> <tr> <td>Serge</td> <td>Baldwin</td> <td>Data Coordinator</td> <td>Singapore</td> <td>64</td> <td>2012/04/09</td> <td>$138,575</td> <td>8352</td> <td>s.baldwin@datatables.net</td> </tr> <tr> <td>Zenaida</td> <td>Frank</td> <td>Software Engineer</td> <td>New York</td> <td>63</td> <td>2010/01/04</td> <td>$125,250</td> <td>7439</td> <td>z.frank@datatables.net</td> </tr> <tr> <td>Zorita</td> <td>Serrano</td> <td>Software Engineer</td> <td>San Francisco</td> <td>56</td> <td>2012/06/01</td> <td>$115,000</td> <td>4389</td> <td>z.serrano@datatables.net</td> </tr> <tr> <td>Jennifer</td> <td>Acosta</td> <td>Junior Javascript Developer</td> <td>Edinburgh</td> <td>43</td> <td>2013/02/01</td> <td>$75,650</td> <td>3431</td> <td>j.acosta@datatables.net</td> </tr> <tr> <td>Cara</td> <td>Stevens</td> <td>Sales Assistant</td> <td>New York</td> <td>46</td> <td>2011/12/06</td> <td>$145,600</td> <td>3990</td> <td>c.stevens@datatables.net</td> </tr> <tr> <td>Hermione</td> <td>Butler</td> <td>Regional Director</td> <td>London</td> <td>47</td> <td>2011/03/21</td> <td>$356,250</td> <td>1016</td> <td>h.butler@datatables.net</td> </tr> <tr> <td>Lael</td> <td>Greer</td> <td>Systems Administrator</td> <td>London</td> <td>21</td> <td>2009/02/27</td> <td>$103,500</td> <td>6733</td> <td>l.greer@datatables.net</td> </tr> <tr> <td>Jonas</td> <td>Alexander</td> <td>Developer</td> <td>San Francisco</td> <td>30</td> <td>2010/07/14</td> <td>$86,500</td> <td>8196</td> <td>j.alexander@datatables.net</td> </tr> <tr> <td>Shad</td> <td>Decker</td> <td>Regional Director</td> <td>Edinburgh</td> <td>51</td> <td>2008/11/13</td> <td>$183,000</td> <td>6373</td> <td>s.decker@datatables.net</td> </tr> <tr> <td>Michael</td> <td>Bruce</td> <td>Javascript Developer</td> <td>Singapore</td> <td>29</td> <td>2011/06/27</td> <td>$183,000</td> <td>5384</td> <td>m.bruce@datatables.net</td> </tr> <tr> <td>Donna</td> <td>Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>4226</td> <td>d.snider@datatables.net</td> </tr> </tbody> </table> </div> </div> </div> </div> </div> </div> <!-- /page content --> <!-- footer content --> <footer> <div class="pull-right"> Gentelella - Bootstrap Admin Template by <a href="https://colorlib.com">Colorlib</a> </div> <div class="clearfix"></div> </footer> <!-- /footer content --> </div> </div> <!-- jQuery --> <script src="../vendors/jquery/dist/jquery.min.js"></script> <!-- Bootstrap --> <script src="../vendors/bootstrap/dist/js/bootstrap.min.js"></script> <!-- FastClick --> <script src="../vendors/fastclick/lib/fastclick.js"></script> <!-- NProgress --> <script src="../vendors/nprogress/nprogress.js"></script> <!-- iCheck --> <script src="../vendors/iCheck/icheck.min.js"></script> <!-- Datatables --> <script src="../vendors/datatables.net/js/jquery.dataTables.js"></script> <script src="../vendors/datatables.net-bs/js/dataTables.bootstrap.min.js"></script> <script src="../vendors/datatables.net-buttons/js/dataTables.buttons.min.js"></script> <script src="../vendors/datatables.net-buttons-bs/js/buttons.bootstrap.min.js"></script> <script src="../vendors/datatables.net-buttons/js/buttons.flash.min.js"></script> <script src="../vendors/datatables.net-buttons/js/buttons.html5.min.js"></script> <script src="../vendors/datatables.net-buttons/js/buttons.print.min.js"></script> <script src="../vendors/datatables.net-fixedheader/js/dataTables.fixedHeader.min.js"></script> <script src="../vendors/datatables.net-keytable/js/dataTables.keyTable.min.js"></script> <script src="../vendors/datatables.net-responsive/js/dataTables.responsive.min.js"></script> <script src="../vendors/datatables.net-responsive-bs/js/responsive.bootstrap.js"></script> <script src="../vendors/datatables.net-scroller/js/dataTables.scroller.min.js"></script> <script src="../vendors/jszip/dist/jszip.min.js"></script> <script src="../vendors/pdfmake/build/pdfmake.min.js"></script> <script src="../vendors/pdfmake/build/vfs_fonts.js"></script> <!-- Custom Theme Scripts --> <script src="../build/js/custom.min.js"></script> <script> var table = $('#datatable-responsive').DataTable(); $("#datatable-responsive_filter").css("display","none"); $("#datatable-responsive_filter").parent().append('<div class="input-group pull-right"><input id="searchforme" type="text" class="form-control" placeholder="Search for..."><button id="clearsearchinput" type="button" class="btn btn-round btn-xs" style="position:absolute; top:6px;right:42px; z-index:99;display:none;background-color:transparent;"><i class="fa fa-close"></i></button><span class="input-group-btn"><button id="go" class="btn btn-default" type="button"><i class="fa fa-search"></i></button></span></div>'); var table = $('#datatable-responsive').DataTable(); $(document).on( 'click','#go', function () { table.search( $('#searchforme').val() ).draw(); } ); $(document).on( 'keyup','#searchforme', function () { if($(this).val().length > 0){ $('#clearsearchinput').css('display','block'); }else{ $('#clearsearchinput').css('display','none'); } $(document).on( 'click','#clearsearchinput', function () { $('#searchforme').val(''); $(this).css('display','none'); } ); } ); </script> </body> </html>
没有文件包的话，参考：https://github.com/puikinsh/gentelella中的tables_dynamic.html页面。