Skip to content Skip to sidebar Skip to footer
Home / Javascript

Multiple Checkboxes To Select Data From Table

Post a Comment
I have this code(link to JSFIDDLE also included): $(document).ready(function (){ var table = $('#example').DataTable(); $('#47y').on('click', function(){ if(this.checked){

Solution 1:

Instead of using two separate functions use one; the function is as follows:

$(document).ready(function() {
  var table = $('#example').DataTable();



  $('input[type="checkbox"]').on('change', function() {
    console.log($(this).attr("id"), this.checked)
    var choosedString = "";
    if ($('#47y').prop('checked')) {
      choosedString = "47"
    }
    if ($('#51y').prop('checked')) {
      choosedString += choosedString.length > 0 ? "|" : "";
      choosedString += "51"
    }
    table.column(3).search(choosedString, true, false).draw();

  });






});
@import url('https://cdn.datatables.net/r/dt/dt-1.10.9/datatables.min.css');
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script><scriptsrc="https://cdn.datatables.net/r/dt/dt-1.10.9/datatables.min.js"></script><label><inputid="47y"type="checkbox">47 years</label><label><inputid="51y"type="checkbox">51 years</label><hr><tableid="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>Bradley Greer</td><td>Software Engineer</td><td>London</td><td>41</td><td>2012/10/13</td><td>$132,000</td></tr><tr><td>Dai Rios</td><td>Personnel Lead</td><td>Edinburgh</td><td>35</td><td>2012/09/26</td><td>$217,500</td></tr><tr><td>Jenette Caldwell</td><td>Development Lead</td><td>New York</td><td>30</td><td>2011/09/03</td><td>$345,000</td></tr><tr><td>Yuri Berry</td><td>Chief Marketing Officer (CMO)</td><td>New York</td><td>40</td><td>2009/06/25</td><td>$675,000</td></tr><tr><td>Caesar Vance</td><td>Pre-Sales Support</td><td>New York</td><td>21</td><td>2011/12/12</td><td>$106,450</td></tr><tr><td>Doris Wilder</td><td>Sales Assistant</td><td>Sidney</td><td>23</td><td>2010/09/20</td><td>$85,600</td></tr><tr><td>Angelica Ramos</td><td>Chief Executive Officer (CEO)</td><td>London</td><td>47</td><td>2009/10/09</td><td>$1,200,000</td></tr><tr><td>Gavin Joyce</td><td>Developer</td><td>Edinburgh</td><td>42</td><td>2010/12/22</td><td>$92,575</td></tr><tr><td>Jennifer Chang</td><td>Regional Director</td><td>Singapore</td><td>28</td><td>2010/11/14</td><td>$357,650</td></tr><tr><td>Brenden Wagner</td><td>Software Engineer</td><td>San Francisco</td><td>28</td><td>2011/06/07</td><td>$206,850</td></tr><tr><td>Fiona Green</td><td>Chief Operating Officer (COO)</td><td>San Francisco</td><td>48</td><td>2010/03/11</td><td>$850,000</td></tr><tr><td>Shou Itou</td><td>Regional Marketing</td><td>Tokyo</td><td>20</td><td>2011/08/14</td><td>$163,000</td></tr><tr><td>Michelle House</td><td>Integration Specialist</td><td>Sidney</td><td>37</td><td>2011/06/02</td><td>$95,400</td></tr><tr><td>Suki Burks</td><td>Developer</td><td>London</td><td>53</td><td>2009/10/22</td><td>$114,500</td></tr><tr><td>Prescott Bartlett</td><td>Technical Author</td><td>London</td><td>27</td><td>2011/05/07</td><td>$145,000</td></tr><tr><td>Gavin Cortez</td><td>Team Leader</td><td>San Francisco</td><td>22</td><td>2008/10/26</td><td>$235,500</td></tr><tr><td>Martena Mccray</td><td>Post-Sales support</td><td>Edinburgh</td><td>46</td><td>2011/03/09</td><td>$324,050</td></tr><tr><td>Unity Butler</td><td>Marketing Designer</td><td>San Francisco</td><td>47</td><td>2009/12/09</td><td>$85,675</td></tr><tr><td>Howard Hatfield</td><td>Office Manager</td><td>San Francisco</td><td>51</td><td>2008/12/16</td><td>$164,500</td></tr><tr><td>Hope Fuentes</td><td>Secretary</td><td>San Francisco</td><td>41</td><td>2010/02/12</td><td>$109,850</td></tr><tr><td>Vivian Harrell</td><td>Financial Controller</td><td>San Francisco</td><td>62</td><td>2009/02/14</td><td>$452,500</td></tr><tr><td>Timothy Mooney</td><td>Office Manager</td><td>London</td><td>37</td><td>2008/12/11</td><td>$136,200</td></tr><tr><td>Jackson Bradshaw</td><td>Director</td><td>New York</td><td>65</td><td>2008/09/26</td><td>$645,750</td></tr><tr><td>Olivia Liang</td><td>Support Engineer</td><td>Singapore</td><td>64</td><td>2011/02/03</td><td>$234,500</td></tr><tr><td>Bruno Nash</td><td>Software Engineer</td><td>London</td><td>38</td><td>2011/05/03</td><td>$163,500</td></tr><tr><td>Sakura Yamamoto</td><td>Support Engineer</td><td>Tokyo</td><td>37</td><td>2009/08/19</td><td>$139,575</td></tr><tr><td>Thor Walton</td><td>Developer</td><td>New York</td><td>61</td><td>2013/08/11</td><td>$98,540</td></tr><tr><td>Finn Camacho</td><td>Support Engineer</td><td>San Francisco</td><td>47</td><td>2009/07/07</td><td>$87,500</td></tr><tr><td>Serge Baldwin</td><td>Data Coordinator</td><td>Singapore</td><td>64</td><td>2012/04/09</td><td>$138,575</td></tr><tr><td>Zenaida Frank</td><td>Software Engineer</td><td>New York</td><td>63</td><td>2010/01/04</td><td>$125,250</td></tr><tr><td>Zorita Serrano</td><td>Software Engineer</td><td>San Francisco</td><td>56</td><td>2012/06/01</td><td>$115,000</td></tr><tr><td>Jennifer Acosta</td><td>Junior Javascript Developer</td><td>Edinburgh</td><td>43</td><td>2013/02/01</td><td>$75,650</td></tr><tr><td>Cara Stevens</td><td>Sales Assistant</td><td>New York</td><td>46</td><td>2011/12/06</td><td>$145,600</td></tr><tr><td>Hermione Butler</td><td>Regional Director</td><td>London</td><td>47</td><td>2011/03/21</td><td>$356,250</td></tr><tr><td>Lael Greer</td><td>Systems Administrator</td><td>London</td><td>21</td><td>2009/02/27</td><td>$103,500</td></tr><tr><td>Jonas Alexander</td><td>Developer</td><td>San Francisco</td><td>30</td><td>2010/07/14</td><td>$86,500</td></tr><tr><td>Shad Decker</td><td>Regional Director</td><td>Edinburgh</td><td>51</td><td>2008/11/13</td><td>$183,000</td></tr><tr><td>Michael Bruce</td><td>Javascript Developer</td><td>Singapore</td><td>29</td><td>2011/06/27</td><td>$183,000</td></tr><tr><td>Donna Snider</td><td>Customer Support</td><td>New York</td><td>27</td><td>2011/01/25</td><td>$112,001</td></tr></tbody></table>

Here I have updated your fiddle take a look. You actually required regex search for the same; use regex in your code.

Solution 2:

Your JS Fiddle isn't working for some reason and I couldn't be bothered to figure it out, but this seems simple enough... I'd say this should work:

$(document).ready(function (){
var table = $('#example').DataTable();
var global_47y = $('#47y');
var global_51y = $('#51y');

$('#47y').on('click', function(){
    $.fn.dataTable.ext.search.push(
        function (settings, data, dataIndex){
            return (((data[3] == 47) ? true : false) && global_47y.checked) || (((data[3] == 51) ? true : false) && global_51y.checked);
        }
    );
    table.draw();
    if(this.checked){
        $.fn.dataTable.ext.search.pop();    
    }
});

// exactly the same code here...
$('#51y').on('click', function(){
    $.fn.dataTable.ext.search.push(
        function (settings, data, dataIndex){
            return (((data[3] == 47) ? true : false) && global_47y.checked) || (((data[3] == 51) ? true : false) && global_51y.checked);
        }
    );
    table.draw();
    if(this.checked){
        $.fn.dataTable.ext.search.pop();    
    }
});

... etc

Solution 3:

When clicking on the first checkbox you have to see if the state of the other checkbox is clicked and then return 47 AND 51, if not, then just 47.

The same applies for the 51 checkbox.

It is just small if statement which will check the condition of the other checkbox

prototype

function Select47(){
if(checkboxAge51.isClicked){
 return47 AND 51
    } else {
     return47
    }
}

Solution 4:

In both checkboxes events check both of them.

functiongetCheckedValues() {   
    var values = [];
  if ($('#47y').checked) {
    values.push(47);
  }
  if ($('#51y').checked) {
    values.push(51);
  }
  return values;
}

and the dataTable search -

$.fn.dataTable.ext.search.push(
             function (settings, data, dataIndex){
                var values = getCheckedValues();
                return values.indexOf(data[3]) ? true : false;                
             }
          );

Solution 5:

So, when you're doing your comparison, you are not checking to see if the other checkbox is checked. Only the one that was just clicked. You need to keep track of the other checkbox and see if it is checked and return that result.

Working JsFiddle

$(document).ready(function() {
  var table = $('#example').DataTable();
  var fourtySevenCheckbox = $('#47y')
  var fiftyOneCheckbox = $('#51y')





  $('#47y').on('click', function() {
    if (this.checked) {
  $.fn.dataTable.ext.search.push(
    function(settings, data, dataIndex) {
      if (fiftyOneCheckbox.prop('checked')) {
        return (data[3] == 47 || data[3] == 51);
      } else {
        return (data[3] == 47);
      }
    }
  );
}

table.draw();

if (this.checked) {
  $.fn.dataTable.ext.search.pop();
}
  });




  $('#51y').on('click', function() {
    if (this.checked) {
      $.fn.dataTable.ext.search.push(
        function(settings, data, dataIndex) {
          if (fourtySevenCheckbox.prop('checked')) {
        return (data[3] == 51 || data[3] == 47)
      } else {
        return (data[3] == 51);
      }
    }
  );
}

table.draw();

if (this.checked) {
  $.fn.dataTable.ext.search.pop();
}
  });





});

Post a Comment for "Multiple Checkboxes To Select Data From Table"