筛选表取决于多个选择标签

本文介绍了筛选表取决于多个选择标签的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正在使用Jquery数据表，并且我想使用多个选择标签来过滤数据表，但目前我能够使用1个选择标签进行过滤.一个选择标签用于一列，另一选择标签用于另一列.两个选择标签都应在或"状态下工作.和与"过滤数据表的条件.我正在共享代码段.请提供一些建议使其生效.

I am using Jquery datatable and I want to use multiple select tags to filter datatable but currently I am able to filter using 1 select tag. One select tag is for one column and the another select tag is for another column. Both select tag should work in "OR" and "AND" condition to filter datatable. I am sharing code snippet. Please provide some suggestion to make it work .

HTML

<select id="cato" class="form-control"> <option disabled selected="true">-Select Category-</option> <option>Electronics</option> <option>Sports</option> </select> <select id="subo" class="form-control"> <option disabled selected="true">-Select Subcategory-</option> <option>Laptop</option> <option>Mobile</option> </select> <table id="example" class="table display"> <thead> <tr> <th>Product</th> <th>Subcategory</th> <th>Category</th> </tr> </thead> <tbody id="r"> <tr> <td>Samsung</td> <td>Mobile</td> <td>Electronics</td> </tr> <tr> <td>Racket</td> <td>Tennis</td> <td>Sports</td> </tr> <tr> <td>Bat</td> <td>Cricket</td> <td>Sports</td> </tr> <tr> <td>Dell</td> <td>Laptop</td> <td>Electronics</td> </tr> <tr> <td>Iphone</td> <td>Mobile</td> <td>Electronics</td> </tr> <tr> <td>Soccer Ball</td> <td>Soccer</td> <td>Sports</td> </tr> </tbody> </table>

jQuery

<script> var table = $('#example').DataTable({ "bLengthChange": false, pageLength: 3, dom: 'tip' }); $.fn.dataTable.ext.search.push( function( settings, data, dataIndex ) { var filter= $("#cato option:selected").text().toUpperCase(); var subCategory = String(data[2]).toUpperCase(); if ( filter == subCategory ) return true; else return false; } ); $('#cato').on('change', function() { table.draw() }); </script>

推荐答案

这样的事情如何?

var table = $('#example').DataTable({ "bLengthChange": false, //searching: false, pageLength: 2, dom: 'tip' }); $.fn.dataTable.ext.search.push( function( settings, data, dataIndex ) { var filterCategory= $("#cato option:selected").text().toUpperCase(); var filterSubCategory= $("#subo option:selected").text().toUpperCase(); var subCategory = String(data[1]).toUpperCase(); var category = String(data[2]).toUpperCase(); //console.log(filterSubCategory); if(filterSubCategory != "-SELECT SUBCATEGORY-") { if ( filterCategory == category && filterSubCategory == subCategory) return true; } else if(filterCategory != "-SELECT CATEGORY-") { if ( filterCategory == category) return true; } return false; } ); $('#cato').on('change', function() { $('#subo').val(""); table.draw(); }); $('#subo').on('change', function() { table.draw(); });

<link href="cdn.datatables/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet"/> <script src="cdnjs.cloudflare/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="cdn.datatables/1.10.21/js/jquery.dataTables.min.js"></script> <select id="cato" class="form-control" > <option value="" disabled selected="true">-Select Category-</option> <option>Electronics</option> <option>Sports</option> </select> <select id="subo" class="form-control"> <option value="" disabled selected="true">-Select Subcategory-</option> <option>Laptop</option> <option>Mobile</option> </select> <table id="example" class="table display"> <thead> <tr> <th>Product</th> <th>Subcategory</th> <th>Category</th> </tr> </thead> <tbody id="r"> <tr> <td>Samsung</td> <td>Mobile</td> <td>Electronics</td> </tr> <tr> <td>Racket</td> <td>Tennis</td> <td>Sports</td> </tr> <tr> <td>Bat</td> <td>Cricket</td> <td>Sports</td> </tr> <tr> <td>Dell</td> <td>Laptop</td> <td>Electronics</td> </tr> <tr> <td>Iphone</td> <td>Mobile</td> <td>Electronics</td> </tr> <tr> <td>Soccer Ball</td> <td>Soccer</td> <td>Sports</td> </tr> </tbody> </table>

快乐编码！