使用输入文本客户端过滤数据表

我有一个HTML页面，头部内有一些脚本，我有一个ID = example的DataTable和一个按钮id =“btnFilter”，它应该过滤数据DataTable基于用户在其他人内部输入的内容“输入文本标签”。我尝试了很多互联网上的变化，但我无法做任何可以做我想做的事情。使用输入文本客户端过滤数据表

这是我的HTML，我有输入和标签标记，当用户将输入想过滤的文本：

<table id="filterLog" class="table table-striped"> 
      <thead> 
       <h4>Table</h4> 
      </thead> 
      <tfoot> 
       <th> 
       </th> 
      </tfoot> 
      <tbody> 
       <tr> 
        <td><label class="input-group">From:</label></td> 
        <td><label class="input-group">To:</label></td> 
        <td><label class="input-group">Created:</label></td> 
        <td><label class="input-group">Comp:</label></td> 
       </tr> 
      </tbody> 
      <tr id="linhasFiltro"> 
       <td><input class="form-control" type="date" id="date1" /></td> 
       <td><input class="form-control" type="date" id="date2" /></td> 
       <td><input class="form-control" type="text" id="creator" maxlength="15" /></td> 
       <td><input class="form-control" type="text" id="cLog" maxlength="10"/></td> 
      </tr> 
      <tr> 
       <td colspan="4"><label class="input-group">Type:</label></td> 
      </tr> 
      <tr> 
       <td colspan="1"> 
        <select id="tipoLog" class="form-control"> 
         <option>Error</option> 
         <option>Test</option> 
         <option>Info</option> 
        </select> 
       </td> 
       <td><input type="button" value="Filter" id="btnFilter" class="btn btn-primary" />&nbsp;&nbsp;<input type="button" id="btnExport" value="Exportar" class="btn btn-primary" /></td> 
      </tr> 
      <tr class="border:0px;"> 
       <td colspan="6" id="consiError" ></td> 
      </tr> 
     </table>

和所有我想要的是，当输入ID内的用户类型=“cLog”，然后单击btnFiltrar，DataTable必须显示列中相同文本的所有行。

THX家伙

来源

2017-08-14 sathoril

请尽量在你接下来的问题更具体，告诉我们什么ü已经tryied。人们不应该写你的解决方案，你应该写你已经尝试过的，你的问题是什么，人们会帮助你。

看看数据表插件： https://datatables.net/

工作示例与数据表： https://jsfiddle.net/kt0yotsn/

HTML：

<table id="example" 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> 
    <tfoot> 
     <tr> 
      <th>Name</th> 
      <th>Position</th> 
      <th>Office</th> 
      <th>Age</th> 
      <th>Start date</th> 
      <th>Salary</th> 
     </tr> 
    </tfoot> 
    <tbody> 
     <tr> 
      <td>Tiger Nixon</td> 
      <td>System Architect</td> 
      <td>Edinburgh</td> 
      <td>61</td> 
      <td>2011/04/25</td> 
      <td>$320,800</td> 
     </tr> 
     <tr> 
      <td>Garrett Winters</td> 
      <td>Accountant</td> 
      <td>Tokyo</td> 
      <td>63</td> 
      <td>2011/07/25</td> 
      <td>$170,750</td> 
     </tr> 
     <tr> 
      <td>Ashton Cox</td> 
      <td>Junior Technical Author</td> 
      <td>San Francisco</td> 
      <td>66</td> 
      <td>2009/01/12</td> 
      <td>$86,000</td> 
     </tr> 
     <tr> 
      <td>Cedric Kelly</td> 
      <td>Senior Javascript Developer</td> 
      <td>Edinburgh</td> 
      <td>22</td> 
      <td>2012/03/29</td> 
      <td>$433,060</td> 
     </tr> 
    </tbody> 
</table>

JAVASCRIPT：

$(document).ready(function() { 
    $('#example').DataTable(); 
});

我施氮上面的代码，下面的JavaScript库文件已加载的应用在这个例子：

//code.jquery.com/jquery-1.12.4.js https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js

下面的CSS库文件装载使用在这个例子中，以提供该表的造型：

https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css

来源

2017-08-14 18:48:48

我知道它已经有一段时间，因为我张贴在这里，但我设法做到这一点，就像这样。

function Filter($("#cLog").val()) { 
 
      if (!($("#cLog").val() == "-Default-")) { 
 
       tabelaProjetos.columns().every(function() { 
 
        var columnRelated = dataTableName.column(1); 
 
        if (columnRelated.search() !== $("#cLog").val()) { 
 
         columnRelated 
 
          .search($("#cLog").val()); 
 
        } 
 
       }); 
 
      } 
 
     }

即代码以上滤波器基于所述表格内的特定'input'一个特定的列。所以，我做了其他过滤功能来分别过滤其他输入，并设法在btnClick event和BEHOLD中调用所有这些功能，过滤了DataTable。

希望我能帮助别人，希望我的英语至少可读。

Thxx

来源

2017-09-12 14:28:29 sathoril

使用输入文本客户端过滤数据表

回答

相关问题