数据表复选框多选
Posted
技术标签:
【中文标题】数据表复选框多选【英文标题】：Datatables Checkbox Multi Select 【发布时间】：2020-07-08 06:22:27 【问题描述】：我正在使用数据表 v1.10，并且我为用户提供了许多选择框以过滤结果。我想根据他们的选择过滤特定列的内容。
我正在建立一个可供当地社区搜索和发现的志愿者清单。
他们需要能够过滤单个和多个值。因此，如果他们选择Collection，表格应该只显示包含Collection 的结果。如果他们选择Collection 和 Cleaning，表格应该只显示包含Collection 和 Cleaning（不是Delivery）的结果。等等
目前我的表格仅基于单个选择进行过滤。
Here's a fiddle。代码也在下面；
建议将不胜感激。
$(document).ready(function ()
var data = [
id: 1,
full_name: "Andrea Ragg",
email: "aragg0@netlog.com",
telephone: "584-78-0505",
location: "Derry",
service: "Collection",
availability: 0
,
id: 2,
full_name: "Thornton Keeri",
email: "tkeeri1@imageshack.us",
telephone: "503-58-8194",
location: "Cork",
service: "Collection, Cleaning, Delivery",
availability: 0
,
id: 3,
full_name: "Reuven Beddis",
email: "rbeddis2@china.com.cn",
telephone: "412-16-2320",
location: "Galway",
service: "Delivery, Collection",
availability: 0
,
id: 4,
full_name: "Phil Bardwall",
email: "pbardwall3@phpbb.com",
telephone: "864-82-5385",
location: "Cork",
service: "Collection, Cleaning, Delivery",
availability: 0
,
id: 5,
full_name: "Torey Jefford",
email: "tjefford4@seesaa.net",
telephone: "879-42-9577",
location: "Cork",
service: "Cleaning, Delivery",
availability: 1
,
id: 6,
full_name: "Chandler Robe",
email: "crobe5@biblegateway.com",
telephone: "299-07-6714",
location: "Derry",
service: "Collection",
availability: 0
,
id: 7,
full_name: "Rollie Boorn",
email: "rboorn6@g.co",
telephone: "358-94-3758",
location: "Derry",
service: "Delivery",
availability: 0
,
id: 8,
full_name: "Andie Daulton",
email: "adaulton7@nydailynews.com",
telephone: "776-32-4779",
location: "Derry",
service: "Collection, Cleaning, Delivery",
availability: 1
,
id: 9,
full_name: "Andonis Knagges",
email: "aknagges8@live.com",
telephone: "879-70-4074",
location: "Galway",
service: "Cleaning",
availability: 1
,
id: 10,
full_name: "Marney Moreinis",
email: "mmoreinis9@jalbum.net",
telephone: "324-76-8540",
location: "Dublin",
service: "Cleaning, Collection",
availability: 0
,
id: 11,
full_name: "Jean Drayson",
email: "jdraysona@biglobe.ne.jp",
telephone: "741-85-8028",
location: "Dublin",
service: "Cleaning, Collection, Delivery",
availability: 1
,
id: 12,
full_name: "Rhea Troubridge",
email: "rtroubridgeb@theguardian.com",
telephone: "342-47-7173",
location: "Dublin",
service: "Cleaning, Delivery",
availability: 1
,
id: 13,
full_name: "Cord Habergham",
email: "chaberghamc@columbia.edu",
telephone: "400-95-9506",
location: "Cork",
service: "Cleaning, Delivery, Collection",
availability: 0
,
id: 14,
full_name: "Otha Hiers",
email: "ohiersd@facebook.com",
telephone: "697-07-9372",
location: "Dublin",
service: "Cleaning, Delivery",
availability: 0
,
id: 15,
full_name: "Edna Barg",
email: "ebarge@wix.com",
telephone: "210-66-2867",
location: "Dublin",
service: "Cleaning, Collection, Delivery",
availability: 1
,
id: 16,
full_name: "Rozalin Wilmut",
email: "rwilmutf@freewebs.com",
telephone: "732-74-0848",
location: "Galway",
service: "Cleaning",
availability: 0
,
id: 17,
full_name: "Glen Darben",
email: "gdarbeng@google.com.au",
telephone: "570-01-5383",
location: "Galway",
service: "Cleaning, Collection, Delivery",
availability: 0
,
id: 18,
full_name: "Wally Longstaff",
email: "wlongstaffh@reference.com",
telephone: "278-18-3965",
location: "Belfast",
service: "Delivery",
availability: 1
,
id: 19,
full_name: "Moise Murrhardt",
email: "mmurrhardti@t.co",
telephone: "165-08-4136",
location: "Dublin",
service: "Delivery, Cleaning, Collection",
availability: 1
,
id: 20,
full_name: "Gloria Tedder",
email: "gtedderj@ucoz.ru",
telephone: "809-19-8763",
location: "Dublin",
service: "Delivery, Collection, Cleaning",
availability: 0
,
id: 21,
full_name: "Marthena Pavel",
email: "mpavelk@state.tx.us",
telephone: "180-16-5508",
location: "Derry",
service: "Cleaning",
availability: 1
,
id: 22,
full_name: "Livvy Tesoe",
email: "ltesoel@timesonline.co.uk",
telephone: "748-54-7269",
location: "Derry",
service: "Collection, Cleaning",
availability: 1
,
id: 23,
full_name: "Angelle Tondeur",
email: "atondeurm@ebay.com",
telephone: "761-27-3445",
location: "Galway",
service: "Cleaning, Collection",
availability: 1
,
id: 24,
full_name: "Marsiella Van Schafflaer",
email: "mvann@europa.eu",
telephone: "330-85-4309",
location: "Derry",
service: "Delivery, Cleaning",
availability: 1
,
id: 25,
full_name: "Norene Pettegree",
email: "npettegreeo@marketwatch.com",
telephone: "324-47-1541",
location: "Galway",
service: "Delivery",
availability: 0
,
id: 26,
full_name: "Gay Newcome",
email: "gnewcomep@free.fr",
telephone: "633-37-5490",
location: "Derry",
service: "Delivery, Cleaning",
availability: 1
,
id: 27,
full_name: "Karrah Peltzer",
email: "kpeltzerq@alibaba.com",
telephone: "785-01-1150",
location: "Belfast",
service: "Collection",
availability: 1
,
id: 28,
full_name: "Corrinne Gilli",
email: "cgillir@4shared.com",
telephone: "390-05-7538",
location: "Belfast",
service: "Collection",
availability: 1
,
id: 29,
full_name: "Jaymee Townrow",
email: "jtownrows@walmart.com",
telephone: "561-19-2949",
location: "Belfast",
service: "Delivery",
availability: 0
,
id: 30,
full_name: "Sarita Siggs",
email: "ssiggst@berkeley.edu",
telephone: "272-85-9311",
location: "Belfast",
service: "Delivery, Cleaning, Collection",
availability: 1
,
id: 31,
full_name: "Crissie Connerry",
email: "cconnerryu@bbb.org",
telephone: "429-41-7759",
location: "Belfast",
service: "Delivery",
availability: 1
,
id: 32,
full_name: "Pincus Olyfant",
email: "polyfantv@flickr.com",
telephone: "554-04-4124",
location: "Dublin",
service: "Cleaning",
availability: 1
,
id: 33,
full_name: "Joela Spearett",
email: "jspearettw@slashdot.org",
telephone: "249-42-3733",
location: "Cork",
service: "Collection, Cleaning",
availability: 0
,
id: 34,
full_name: "Teodora Floyd",
email: "tfloydx@pcworld.com",
telephone: "867-72-6127",
location: "Dublin",
service: "Cleaning, Collection",
availability: 0
,
id: 35,
full_name: "Sherrie Minall",
email: "sminally@google.co.uk",
telephone: "698-47-8076",
location: "Cork",
service: "Collection",
availability: 0
,
id: 36,
full_name: "Ikey Sowerby",
email: "isowerbyz@washingtonpost.com",
telephone: "428-82-5186",
location: "Dublin",
service: "Cleaning",
availability: 1
,
id: 37,
full_name: "Dasie Skelhorn",
email: "dskelhorn10@trellian.com",
telephone: "804-03-0371",
location: "Derry",
service: "Delivery, Collection, Cleaning",
availability: 0
,
id: 38,
full_name: "Wilburt Pickard",
email: "wpickard11@edublogs.org",
telephone: "130-53-6389",
location: "Cork",
service: "Delivery",
availability: 1
,
id: 39,
full_name: "Marven Poutress",
email: "mpoutress12@joomla.org",
telephone: "630-06-8139",
location: "Galway",
service: "Collection, Cleaning, Delivery",
availability: 0
,
id: 40,
full_name: "Sheff Ruck",
email: "sruck13@vinaora.com",
telephone: "132-51-1884",
location: "Derry",
service: "Collection",
availability: 1
,
id: 41,
full_name: "Hyacinth Botcherby",
email: "hbotcherby14@toplist.cz",
telephone: "861-11-1370",
location: "Belfast",
service: "Collection, Cleaning",
availability: 0
,
id: 42,
full_name: "Renato Jouhan",
email: "rjouhan15@yahoo.com",
telephone: "616-39-1823",
location: "Belfast",
service: "Delivery, Collection, Cleaning",
availability: 1
,
id: 43,
full_name: "Fayth Alwin",
email: "falwin16@unc.edu",
telephone: "887-35-7269",
location: "Dublin",
service: "Delivery, Collection",
availability: 0
,
id: 44,
full_name: "Hadrian Gatlin",
email: "hgatlin17@biblegateway.com",
telephone: "615-44-7488",
location: "Dublin",
service: "Delivery, Collection, Cleaning",
availability: 0
,
id: 45,
full_name: "Rois Fife",
email: "rfife18@deviantart.com",
telephone: "655-09-6453",
location: "Galway",
service: "Delivery",
availability: 1
,
id: 46,
full_name: "Pavlov Pactat",
email: "ppactat19@nature.com",
telephone: "261-25-9415",
location: "Cork",
service: "Delivery",
availability: 0
,
id: 47,
full_name: "Brocky Burnell",
email: "bburnell1a@blinklist.com",
telephone: "644-47-6112",
location: "Belfast",
service: "Delivery, Cleaning, Collection",
availability: 0
,
id: 48,
full_name: "Naoma Brimson",
email: "nbrimson1b@elpais.com",
telephone: "751-85-9640",
location: "Belfast",
service: "Delivery",
availability: 0
,
id: 49,
full_name: "Valma Reddoch",
email: "vreddoch1c@buzzfeed.com",
telephone: "110-89-6953",
location: "Derry",
service: "Collection, Delivery, Cleaning",
availability: 1
,
id: 50,
full_name: "Ebony Kilsby",
email: "ekilsby1d@engadget.com",
telephone: "604-37-4930",
location: "Belfast",
service: "Delivery",
availability: 1
];
dataTable = $("#example").DataTable(
data: data,
responsive: true,
//dom: '<"top"f>rt<"bottom"p><"clear">',
language:
searchPlaceholder: "Search records"
,
columns: [
data: "id" ,
data: "full_name" ,
data: "email" ,
data: "telephone" ,
data: "location" ,
data: "service" ,
data: "availability",
render: function (data, type, row, meta)
if (data === 0)
return '<span class="badge badge-secondary">busy</span>'
;
if (data === 1)
return '<span class="badge badge-success">available</span>'
;
],
columnDefs: [
targets: [0, 2, 3, 5],
orderable: false
]
);
$('.filter-checkbox').on('change', function(e)
var searchTerms = []
$.each($('.filter-checkbox'), function(i,elem)
if($(elem).prop('checked'))
searchTerms.push("^" + $(this).val() + "$")
)
dataTable.column(5).search(searchTerms.join('|'), true, false, true).draw();
);
);.filter-checkbox
margin-left: 30px
.filter-checkbox:first-child
margin-left:0
<link href="https://cdn.datatables.net/responsive/2.2.3/css/responsive.dataTables.min.css" rel="stylesheet"/>
<link href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script>
<div class="container">
<div class="row">
<div class="col py-3 text-center">
<h2>Community Connect</h2>
<p class="lead text-muted">Table will filter as you type.</p>
</div>
</div>
<div class="row">
<div class="col-8">
<div class="filter-wrapper">
<input type="checkbox" class="filter-checkbox" value="collection"/> Collection
<input type="checkbox" class="filter-checkbox" value="delivery"/> Delivery
<input type="checkbox" class="filter-checkbox" value="cleaning"/> Cleaning
</div>
</div>
</div>
<div class="row">
<div class="col py-3">
<table id="example" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>Telephone</th>
<th>Location</th>
<th>Service Offered</th>
<th>Availability</th>
</tr>
</thead>
</table>
</div>
</div>
</div>【问题讨论】：
【参考方案1】：为每个复选框值添加隐藏列，在该列中使用简单的真/假。然后，您可以让每个复选框对其列进行过滤，并根据复选框是否被选中来设置过滤值。当您添加更多列时，它使过滤变得简单。
更复杂的解决方案是在单个列上使用多选，可能是隐藏的，然后动态构建一个正则表达式来过滤该列。我将它用于动态多选选项列表，但由于您的选项看起来是静态的，隐藏列似乎是一种更简单的方法。
【讨论】：
我已经使用数据表好几年了，并且大量使用了他们的（现在）遗留 api。较新的版本可能会提供更好的方法，但我更习惯于使用数据表的传统方式。 我想我现在更好地理解了您的要求，它仅限于检查的记录。因此，如果用户选择 Collection，则返回的记录必须只有 Collection。那时我的建议对你不起作用，假设是 Or's。以上是关于数据表复选框多选的主要内容，如果未能解决你的问题，请参考以下文章
使用带复选框的多选下拉菜单搜索或过滤 jquery 数据表中的列