如何使用主題上的搜索功能創建響應式表格？

我們已經建立了一個使用twentysixteen wordpress主題的網站。如何使用主題上的搜索功能創建響應式表格？

我需要一個搜索框來搜索響應表。下表工作正常的搜索..

http://www.jqueryscript.net/demo/Simple-jQuery-Plugin-For-Html-Table-Live-Search/

現在我試圖用一個響應表，並提供上述搜索不以上述主題

工作，我嘗試以下響應表

http://exisweb.net/responsive-tables-in-wordpress

表響應，但無法提供在桌子上的搜索。

如何提供對上述響應表的搜索？
如何提供一個像上面那樣最快的搜索，其中表格有近2000行七列？

在此先感謝。

數據表似乎並不在二16 wordpress主題

<head> 

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-2.2.3/dt-1.10.12/r-2.1.0/datatables.min.css"/> 

<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-2.2.3/dt-1.10.12/r-2.1.0/datatables.min.js"></script>

$（文件）。就緒（函數（）{VAR 表= $（ '＃示例'）。DataTable的工作（ { scrollY：300, paging：false }）; }）;

<style> 
div.container { max-width: 1200px } 
</style> 
</head> 

<table id="example" class="display 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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</td> 
     </tr> 
    </tbody> 
</table>

來源

2016-07-27 Samuel K

檢查datatables插件https://datatables.net/ –

是datatables插件是開源/免費還是應付？ –

你能幫我一個示例代碼嗎？ –

檢查此HTML文件

<!DOCTYPE html> 
<html> 

<head> 
    <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css"> 
</head> 

<body> 
    <table id="example"> 
     <thead> 
      <tr> 
       <th>Sites</th> 
       <th>Sites2</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>SitePoint</td> 
       <td>SitePoint</td> 
      </tr> 
      <tr> 
       <td>SitePoint</td> 
       <td>SitePoint</td> 
      </tr> 
      <tr> 
       <td>SitePoint</td> 
       <td>SitePoint</td> 
      </tr> 
      <tr> 
       <td>SitePoint</td> 
       <td>SitePoint</td> 
      </tr> 
      <tr> 
       <td>SitePoint</td> 
       <td>SitePoint</td> 
      </tr> 
      <tr> 
       <td>SitePoint</td> 
       <td>SitePoint</td> 
      </tr> 
      <tr> 
       <td>SitePoint</td> 
       <td>SitePoint</td> 
      </tr> 
      <tr> 
       <td>SitePoint</td> 
       <td>SitePoint</td> 
      </tr> 
      <tr> 
       <td>SitePoint</td> 
       <td>SitePoint</td> 
      </tr> 
      <tr> 
       <td>SitePoint</td> 
       <td>SitePoint</td> 
      </tr> 
      <tr> 
       <td>SitePoint</td> 
       <td>SitePoint</td> 
      </tr> 
      <tr> 
       <td>SitePoint</td> 
       <td>SitePoint</td> 
      </tr> 
     </tbody> 
    </table> 
    <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script> 
    <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script> 
    <script> 
     $(function() { 
      $("#example").dataTable(); 
     }) 
    </script> 
</body> 

</html>

來源

2016-07-27 04:22:14

數據表不起作用二十六個主題內，不知道爲什麼.. –

$（ '＃表名'）。數據表（{

 "sDom": "Tft<'row DTTTFooter'<'col-sm-6'i><'col-sm-6'p>>", 
     "aaSorting": [[1, 'asc']], 
     "sPaginationType": "bootstrap", 
     "aLengthMenu": [ 
      [5, 15, 20, -1], 
      [5, 15, 20, "All"] 
     ], 
     "oTableTools": { 
      "aButtons": [ 

      ], 
      "sSwfPath": "assets/swf/copy_csv_xls_pdf.swf" 
     }, 
     "columnDefs": [ 
      { "className": "dt-body-center", "targets": "_all" }, 

     { 
      "targets": [7], 
      "visible": false, 
      "searchable": false 
     } 
     ], 
     "autoWidth": false, 
     "iDisplayLength": 20, 
     "language": { 
      "sEmptyTable": "No service request found.", 
      "sLengthMenu": "_MENU_", 
      "oPaginate": { 
       "sPrevious": "Prev", 
       "sNext": "Next" 
      } 
     }, 
     bProcessing: true,

使用該配置屬性來實現功能，你想

來源

2016-07-27 11:04:59

納文，你能幫我完整的HTML –

數據表不工作在二十六個主題內，不知道爲什麼.. –

如何使用主題上的搜索功能創建響應式表格？

回答

相關問題