Search Panes - select multiple without holding ctrl

robertshawn

I saw this early version of search panes which behaves just like the current version behaves when the ctrl/cmnd key is held down. Is there a way to implement this behavior in the current version? https://datatables.net/blog/2017-11-30#API

allan

Yes, change Select's options for the panes to use its multi option (example of that option here).

Use searchPanes.dtOpts to pass options through to the pane's DataTable.

Allan

robertshawn

Thank you allan. This is fantastic. Here is my code snippet with preSelect, cascadePanes, and dtOpts. In case any one else wants an example of these features.

$(document).ready(function () {
  $('#example').DataTable({
    stateSave: true,
    stateDuration: 0,
    searchPanes: {
      cascadePanes: true,
      dtOpts: {
        paging: true,
        pagingType: 'numbers',
        searching: false,
        select: {
          style: 'multi'
        }
      },
      preSelect: [
        {
          rows: ['Developer', 'Accountant', 'Director', 'Customer Support'],
          column: 1
        },
        {
          rows: ['Edinburgh', 'London', 'New York', 'San Francisco', 'Tokyo'],
          column: 2
        },
        {
          rows: ['27', '30', '33', '40', '42', '53', '61', '63', '65'],
          column: 3
        }
      ],

    },
    dom: 'Plfrtip'
  });

});

allan

Awesome - great to hear that helped.

Allan

robertshawn

Thank you Allen. This is fantastic. SearchPanes has everything you could ask for in a filter and really nice to use on the front end. Here is my code snippet with preSelect, cascadePanes, and dtOpts. In case any one else want to try out these features.

$(document).ready(function () {
  $('#example').DataTable({
    stateSave: true,
    searchPanes: {
      preSelect: [
        {
          rows: ['Developer', 'Accountant', 'Director', 'Customer Support'],
          column: 1
        },
        {
          rows: ['Edinburgh', 'London', 'New York', 'San Francisco', 'Tokyo'],
          column: 2
        },
        {
          rows: ['27', '30', '33', '40', '42', '53', '61', '63', '65'],
          column: 3
        }
      ],
      cascadePanes: true,
      dtOpts: {
        paging: true,
        pagingType: 'numbers',
        searching: false,
        select: {
          style: 'multi'
        }
      }
    },
    dom: 'Plfrtip'
  });
});

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.