Answers

• allan Posts: 63,535Questions: 1Answers: 10,475 Site admin

  September 2023 Answer ✓

  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 Posts: 5Questions: 2Answers: 0

  September 2023

  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 Posts: 63,535Questions: 1Answers: 10,475 Site admin

  September 2023 Answer ✓

  Awesome - great to hear that helped.

  Allan
• robertshawn Posts: 5Questions: 2Answers: 0

  September 2023 edited September 2023

  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.