Search Panes - select multiple without holding ctrl

Search Panes - select multiple without holding ctrl

robertshawnrobertshawn Posts: 5Questions: 2Answers: 0

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

This question has accepted answers - jump to:

Answers

  • allanallan Posts: 63,602Questions: 1Answers: 10,486 Site admin
    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

  • robertshawnrobertshawn Posts: 5Questions: 2Answers: 0

    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'
      });
    

    });

  • allanallan Posts: 63,602Questions: 1Answers: 10,486 Site admin
    Answer ✓

    Awesome - great to hear that helped.

    Allan

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

Sign In or Register to comment.