如何将清除筛选应用于数据表重置按钮？

huangapple
go评论153阅读模式
英文:

How to apply clear filter to datatables reset button?

问题

我正在处理级联数据表列。它运行正常。但是，我不确定如何将重置筛选应用于重置按钮。这是我拥有的内容。要求是当我单击“清除筛选”时，它将删除下拉列筛选以及搜索文本筛选。有办法做到这一点吗？谢谢。

https://live.datatables.net/xexeraci/1/edit

  1. $(document).ready(function() {
  2.   var table = $('#example').DataTable({
  3.     responsive: true,
  4.     searching: true
  5.   });
  7.   buildSelect(table);
  8.   table.on('draw', function () {
  9.     buildSelect(table);
  10.   });
  11. });
  13. function buildSelect(table) {
  14.   var counter = 0;
  15.   table.columns([0, 1, 2]).every(function () {
  16.     var column = table.column(this, {search: 'applied'});
  17.     counter++;
  18.     var select = $('<select><option value=""></option></select>')
  19.     .appendTo($('#dropdown' + counter).empty())
  20.     .on('change', function () {
  21.       var val = $.fn.dataTable.util.escapeRegex(
  22.         $(this).val()
  23.       );
  25.       column
  26.       .search(val ? '^'+val+'$' : '', true, false)
  27.       .draw();
  28.     });
  30.     column.data().unique().sort().each(function (d, j) {
  31.       select.append('<option value="' + d + '">' + d + '</option>');
  32.     });
  33.     
  34.     // 重建将清除现有的选择，因此需要重新填充
  35.     var currSearch = column.search();
  36.     if (currSearch) {
  37.       select.val(currSearch.substring(1, currSearch.length-1));
  38.     }
  39.   });
  40. }
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
  6.     <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
  7.     <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
  9.     <meta charset=utf-8 />
  10.     <title>DataTables - JS Bin</title>
  11.   </head>
  12.   <div class="searchbox">
  13.   <p>Name: <span id="dropdown1">
  14.     </span>
  15.   </p>
  17.   <p>Position: <span id="dropdown2">
  18.     </span>
  19.   </p>
  21.   <p>Office: <span id="dropdown3">
  22.   </span>
  23.   </p>
  24.     <button type="button" id="test">Clear Filters</button>
  25.   </div>
  26.     <table id="example" class="cell-border row-border stripe dataTable no-footer dtr-inline" role="grid" style=" width: 100%; padding-top: 10px;"><thead>
  27.   <tr>
  29.   <th>&#160;</th>
  30.   <th>&#160;</th>
  31.   <th>&#160;</th>
  32.   <th colspan="3" style=" text-align: center;">Information</th>
  33.   </tr>
  36.             <tr>
  37.               <th>Name</th>
  38.               <th>Position</th>
  39.               <th>Office</th>
  40.               <th>Age</th>
  41.               <th>Start date</th>
  42.               <th>Salary</th>
  43.             </tr>
  44.           </thead>
  46.           
  47.           <tbody>
  48.             <tr>
  49.               <td>ID.AI</td>
  50.               <td>System Architect</td>
  51.               <td>Edinburgh</td>
  52.               <td>61</td>
  53.               <td>2011/04/25</td>
  54.               <td>$3,120</td>
  55.             </tr>
  56.             <tr>
  57.               <td>Garrett -2</td>
  58.               <td>Director</td>
  59.               <td>Edinburgh</td>
  60.               <td>63</td>
  61.               <td>2011/07/25</td>
  62.               <td>$5,300</td>
  63.             </tr>
  64.             <tr>
  65.               <td>Ashton.1 -2</td>
  66.               <td>Technical Author</td>
  67.               <td>San Francisco</td>
  68.               <td>66</td>
  69.               <td>2009/01/12</td>
  70.               <td>$4,800</td>
  71.             </tr>
  72.             
  73.               
  74.             </tbody></table>
  75.   </div>
英文:

I am working on cascading datatable columns. It works fine. However, I am not sure how to apply reset filter to the reset button. Here is what I have. The requirement is when I click on Clear Filters, it will remove the drop-down column filter as well as search text filter. Is there a way to do this? Thanks.

https://live.datatables.net/xexeraci/1/edit

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. $(document).ready(function() {
  2. var table = $(&#39;#example&#39;).DataTable({
  3. responsive: true,
  4. searching: true
  5. });
  6. buildSelect( table );
  7. table.on( &#39;draw&#39;, function () {
  8. buildSelect( table );
  9. } );
  10. });
  11. function buildSelect( table ) {
  12. var counter = 0;
  13. table.columns( [0, 1, 2] ).every( function () {
  14. var column = table.column( this, {search: &#39;applied&#39;} );
  15. counter++;
  16. var select = $(&#39;&lt;select&gt;&lt;option value=&quot;&quot;&gt;&lt;/option&gt;&lt;/select&gt;&#39;)
  17. .appendTo( $( &#39;#dropdown&#39; + counter ).empty() )
  18. .on( &#39;change&#39;, function () {
  19. var val = $.fn.dataTable.util.escapeRegex(
  20. $(this).val()
  21. );
  22. column
  23. .search( val ? &#39;^&#39;+val+&#39;$&#39; : &#39;&#39;, true, false )
  24. .draw();
  25. } );
  26. column.data().unique().sort().each( function ( d, j ) {
  27. select.append( &#39;&lt;option value=&quot;&#39;+d+&#39;&quot;&gt;&#39;+d+&#39;&lt;/option&gt;&#39; );
  28. } );
  29. // The rebuild will clear the exisiting select, so it needs to be repopulated
  30. var currSearch = column.search();
  31. if ( currSearch ) {
  32. select.val( currSearch.substring(1, currSearch.length-1) );
  33. }
  34. } );
  35. }

<!-- language: lang-html -->

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html&gt;
  3. &lt;head&gt;
  4. &lt;script src=&quot;https://code.jquery.com/jquery-1.11.3.min.js&quot;&gt;&lt;/script&gt;
  5. &lt;link href=&quot;https://nightly.datatables.net/css/jquery.dataTables.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /&gt;
  6. &lt;script src=&quot;https://nightly.datatables.net/js/jquery.dataTables.js&quot;&gt;&lt;/script&gt;
  7. &lt;meta charset=utf-8 /&gt;
  8. &lt;title&gt;DataTables - JS Bin&lt;/title&gt;
  9. &lt;/head&gt;
  10. &lt;div class=&quot;searchbox&quot;&gt;
  11. &lt;p&gt;Name: &lt;span id=&quot;dropdown1&quot;&gt;
  12. &lt;/span&gt;
  13. &lt;/p&gt;
  14. &lt;p&gt;Postion: &lt;span id=&quot;dropdown2&quot;&gt;
  15. &lt;/span&gt;
  16. &lt;/p&gt;
  17. &lt;p&gt;Office: &lt;span id=&quot;dropdown3&quot;&gt;
  18. &lt;/span&gt;
  19. &lt;/p&gt;
  20. &lt;button type=&quot;button&quot; id=&quot;test&quot;&gt;Clear Filters&lt;/button&gt;
  21. &lt;/div&gt;
  22. &lt;table id=&quot;example&quot; class=&quot;cell-border row-border stripe dataTable no-footer dtr-inline&quot; role=&quot;grid&quot; style=&quot; width: 100%; padding-top: 10px;&quot;&gt;&lt;thead&gt;
  23. &lt;tr&gt;
  24. &lt;th&gt;&amp;#160;&lt;/th&gt;
  25. &lt;th&gt;&amp;#160;&lt;/th&gt;
  26. &lt;th&gt;&amp;#160;&lt;/th&gt;
  27. &lt;th colspan=&quot;3&quot; style=&quot; text-align: center;&quot;&gt;Information&lt;/th&gt;
  28. &lt;/tr&gt;
  29. &lt;tr&gt;
  30. &lt;th&gt;Name&lt;/th&gt;
  31. &lt;th&gt;Position&lt;/th&gt;
  32. &lt;th&gt;Office&lt;/th&gt;
  33. &lt;th&gt;Age&lt;/th&gt;
  34. &lt;th&gt;Start date&lt;/th&gt;
  35. &lt;th&gt;Salary&lt;/th&gt;
  36. &lt;/tr&gt;
  37. &lt;/thead&gt;
  38. &lt;tbody&gt;
  39. &lt;tr&gt;
  40. &lt;td&gt;ID.AI&lt;/td&gt;
  41. &lt;td&gt;System Architect&lt;/td&gt;
  42. &lt;td&gt;Edinburgh&lt;/td&gt;
  43. &lt;td&gt;61&lt;/td&gt;
  44. &lt;td&gt;2011/04/25&lt;/td&gt;
  45. &lt;td&gt;$3,120&lt;/td&gt;
  46. &lt;/tr&gt;
  47. &lt;tr&gt;
  48. &lt;td&gt;Garrett -2&lt;/td&gt;
  49. &lt;td&gt;Director&lt;/td&gt;
  50. &lt;td&gt;Edinburgh&lt;/td&gt;
  51. &lt;td&gt;63&lt;/td&gt;
  52. &lt;td&gt;2011/07/25&lt;/td&gt;
  53. &lt;td&gt;$5,300&lt;/td&gt;
  54. &lt;/tr&gt;
  55. &lt;tr&gt;
  56. &lt;td&gt;Ashton.1 -2&lt;/td&gt;
  57. &lt;td&gt;Technical Author&lt;/td&gt;
  58. &lt;td&gt;San Francisco&lt;/td&gt;
  59. &lt;td&gt;66&lt;/td&gt;
  60. &lt;td&gt;2009/01/12&lt;/td&gt;
  61. &lt;td&gt;$4,800&lt;/td&gt;
  62. &lt;/tr&gt;
  63. &lt;/tbody&gt;&lt;/table&gt;
  64. &lt;/div&gt;

<!-- end snippet -->

答案1

得分: 1

你需要为"Clear Filters"按钮添加一个点击监听器。

演示链接: https://live.datatables.net/clone/7731/edit

这段代码对我来说运行正常。

  1. $(document).ready(function() {
  2.   var table = $('#example').DataTable({
  3.     responsive: true,
  4.     searching: true
  5.   });
  7.   buildSelect(table);
  9.   table.on('draw', function() {
  10.     buildSelect(table);
  11.   });
  12.   $('#test').on('click', function() {
  13.     table.search('').columns().search('').draw();
  14.   });
  15. });
英文:

You have to add a click listener to the "Clear Filters" button.

Demo: https://live.datatables.net/clone/7731/edit

This code works fine for me.

  1. $(document).ready(function() {
  2. var table = $(&#39;#example&#39;).DataTable({
  3. responsive: true,
  4. searching: true
  5. });
  6. buildSelect(table);
  7. table.on(&#39;draw&#39;, function() {
  8. buildSelect(table);
  9. });
  10. $(&#39;#test&#39;).on(&#39;click&#39;, function() {
  11. table.search(&#39;&#39;).columns().search(&#39;&#39;).draw();
  12. });
  13. });

huangapple
  • 本文由 发表于 2023年3月4日 02:40:04
  • 转载请务必保留本文链接：https://go.coder-hub.com/75630748.html
  • datatables
  • html
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定