Useing multi-column JQuery filter and Checkbox selection with multi-select option together

Question

I am trying to use two features from JQuery datatable together.

checkbox infront of each row with multi-select option https://datatables.net/extensions/select/examples/initialisation/checkbox.html. and
multi-column filter and search as in below example https://datatables.net/examples/api/multi_filter.html

I added both the codes together but it is not working. What could be wrong here?

    // Setup - add a text input to each footer cell
    $('#example tfoot th').each(function () {
        var title = $(this).text();
        $(this).html('<input type="text" placeholder="Search ' + title + '" />');
    });
 
    // DataTable
    var table = $('#example').DataTable({
        initComplete: function () {
            // Apply the search
            this.api()
                .columns()
                .every(function () {
                    var that = this;
 
                    $('input', this.footer()).on('keyup change clear', function () {
                        if (that.search() !== this.value) {
                            that.search(this.value).draw();
                        }
                    });
                });
        },
         
        $(document).ready(function() {
    $('#example').DataTable( {
        columnDefs: [ {
            orderable: false,
            className: 'select-checkbox',
            targets:   0
        } ],
        select: {
            style:    'os',
            selector: 'td:first-child'
        },
        order: [[ 1, 'asc' ]]
    } );
} );
    });
});

Swati · Accepted Answer · 2023-02-27 04:29:43Z

Issue is in the way you have combine both the feature together.Currently according to your js code it acts as a separate feature because you are initializing your datatable twice i.e: $('#example')..

Demo Code :

$(document).ready(function() {
  //excluding the first column its for checkbox.. so
  $('#example tfoot th:not(:first)').each(function() {
    var title = $(this).text();
    $(this).html('<input type="text" placeholder="Search ' + title + '" />');
  });
  $('#example').DataTable({
    columnDefs: [{
      orderable: false,
      className: 'select-checkbox',
      targets: 0
    }],
    select: {
      style: 'os',
      selector: 'td:first-child'
    },
    order: [
      [1, 'asc']
    ],
    initComplete: function() { //add here only the search part


      // Apply the search
      this.api()
        .columns()
        .every(function() {
          var that = this;

          $('input', this.footer()).on('keyup change clear', function() {
            if (that.search() !== this.value) {
              that.search(this.value).draw();
            }
          });
        });
    }
  });
});

tfoot input {
  width: 100%;
  padding: 3px;
  box-sizing: border-box;
}

<link rel="stylesheet" href="https://cdn.datatables.net/1.13.2/css/jquery.dataTables.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.6.0/css/select.dataTables.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.13.2/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/select/1.6.0/js/dataTables.select.min.js"></script>
<table id="example" class="display" style="width:100%">
  <thead>
    <tr>
      <th></th>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>$320,800</td>
    </tr>
    <tr>
      <td></td>
      <td>Garrett Winters</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>63</td>
      <td>$170,750</td>
    </tr>
    <tr>
      <td></td>
      <td>Ashton Cox</td>
      <td>Junior Technical Author</td>
      <td>San Francisco</td>
      <td>66</td>
      <td>$86,000</td>
    </tr>
    <tr>
      <td></td>
      <td>Ashton XYX</td>
      <td>JuniorAuthor</td>
      <td>US</td>
      <td>60</td>
      <td>$87,000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th></th>
      <th>Name</th>
      <th>Position</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </tfoot>
</table>

thanks for the help. Can you pls also advice how do I add a method to check if checkbox is selected and get the cell value on if checked with this example?

Collectives™ on Stack Overflow

Useing multi-column JQuery filter and Checkbox selection with multi-select option together

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related