Флажок Datatables Multi Select

Question

Я использую datatables v1.10, и я предлагаю пользователю несколько полей выбора для фильтрации результатов. Я хочу отфильтровать содержимое определенного столбца c в зависимости от их выбора.

Я создаю список добровольцев, который может быть найден и обнаружен местным сообществом.

Им необходимо уметь фильтровать по одному и нескольким значениям. Поэтому, если они выбирают Collection, в таблице должны отображаться только результаты, содержащие Collection. Если они выбирают Collection и Cleaning, в таблице должны отображаться только результаты, содержащие Collection и Cleaning (не Delivery). et c.

В настоящее время моя таблица фильтрует только по одному выбору.

Вот скрипка . Код также ниже;

Предложения будут оценены.

$(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>

Answer 1

Добавьте скрытые столбцы для каждого значения флажка, указав в этом столбце что-то простое, например true / false. Затем вы можете настроить каждый фильтр-флажок для их столбца и установить значение для фильтрации в зависимости от того, установлен ли флажок. Когда вы добавляете больше столбцов, это упрощает фильтрацию.

Более сложным решением является использование множественного выбора для одного столбца, который, вероятно, скрыт, и динамическое построение регулярного выражения для фильтрации столбца. Я использую это для динамического c списка с несколькими вариантами выбора, но, поскольку ваши параметры выглядят как stati c, скрытые столбцы кажутся более легким подходом.