Answers

• allan Posts: 62,003Questions: 1Answers: 10,164 Site admin

  February 2023

  In what way do you want to filter it? The global search should pick that up okay: http://live.datatables.net/nafibako/1/edit .

  Allan
• samithasony Posts: 6Questions: 1Answers: 0

  February 2023

  I'm getting error when trying to open the URL.
  I would like to have the filter in a below way.
  
• kthorngren Posts: 20,431Questions: 26Answers: 4,796

  February 2023

  I'm getting error when trying to open the URL.

  Likely your browser is using SSL and changing the URL from HTTP to HTTPS which won't work.

  Take a look at the Search Panes extenstion. Start with this example. Will this do what you want?

  Kevin
• allan Posts: 62,003Questions: 1Answers: 10,164 Site admin

  February 2023

  I'm looking into that error with the live pages at the moment. For the moment, try using Firefox.

  Allan
• samithasony Posts: 6Questions: 1Answers: 0

  February 2023

  Hi Team,

  Any update?
• allan Posts: 62,003Questions: 1Answers: 10,164 Site admin

  February 2023

  You'll need to give me a bit more that 24 hours for an infrastructure change like this.

  Until then, did you look at Kevin's answer? It might be more relevant that mine, which didn't use SearchPanes (you didn't mention you wanted to use SearchPanes in your original question, so I just used the global filter).

  Allan
• samithasony Posts: 6Questions: 1Answers: 0

  February 2023

  Thanks for the response.

  I've posted my complete code and the image which has the search pane structure, but it is not showing here you need to approve that it seems.

  I've gone through the search panes topics but it is not helping.

  It is a kind of urgent requirement, It would be great if you can help me resolve the issue quickly.

  Below is the reference image of how I want the search for the array field.
  
• samithasony Posts: 6Questions: 1Answers: 0

  February 2023 edited February 2023

  I would like to have the filter as below.
  

  Below is my script.

  <script>
          $(document).ready(function () {
              debugger;
              var chemicalTable = $('#chemicalTable').DataTable({
                   ajax: 'chemical_classification.txt',
                  order: [
                      [1, 'asc'],
                      [2, 'asc'],
                      [3, 'asc'],
                      [4, 'asc'],
                      [5, 'asc'],
                      [6, 'asc'],
                      [7, 'asc'],
                      [8, 'asc']
                  ],
                  //dom: 'rit',
                  dom: 'P<"row mx-0"<"col-12 mb-3 pb-3 border-1 border-bottom"ip><"col"l><"col"f><"col text-end"B>>rti<"py-3"p>',
                 // dom: 'Pfrtip',
                  deferRender: true,
                  scrollY: 500,
                  scrollX: true,
                  scrollCollapse: true,
                  scroller: true,
                  fixedColumns: true,
  
                  // fixedHeader: true,
                  // responsive: true,
                  processing: true,
                  searchPanes: {
                      orderable: false,
                      //cascadePanes: true,
                  },
                  buttons: [{
                      extend: 'copyHtml5',
                      text: '<i class="fa-solid fa-copy"></i>',
                      titleAttr: 'Copy'
                  }, {
                      extend: 'excelHtml5',
                      text: '<i class="fa-solid fa-file-excel"></i>',
                      titleAttr: 'Excel'
                  }, {
                      extend: 'csvHtml5',
                      text: '<i class="fa-solid fa-file-csv"></i>',
                      titleAttr: 'CSV'
                  }, {
                      extend: 'pdfHtml5',
                      text: '<i class="fa-solid fa-file-pdf"></i>',
                      titleAttr: 'PDF'
                  }
                     
                  ],
                 
                  columnDefs: [{
                      visible: false,
                      targets: [0]
  
                      //targets: [0, 7, 8, 9]
                      // targets: [0, 7, 8, 9]
                  },
                  {
                      targets: 1,
                      render: function (data, type, row, meta) {
                          if (type === 'display') {
                              data = '<a target=_blank href=seqg-details.html?id=' + row[9] + '>' + data + '</a>';
                          }
                          return data;
  
                      }
  
                  },
  
                  {
                      searchPanes: {
                          show: false
                      },
                      targets: [5, 7, 8, 6]
                      // targets: [4, 5, 6, 9]
  
                  }, {
                      searchPanes: {
                          initCollapsed: true
                      },
                      // targets: [1, 2, 3]
                      targets: [7, 8, 1, 2, 3]
  
                  }, {
                      targets: 0,
                      searchPanes: {
                          dtOpts: {
                              select: {
                                  style: 'single'
                              }
                          }
                      }
                  }
                      //{ "width": "20%", targets:[ 0,1,2,3,4,5,6,7,8,9] }
                  ],
  
                  initComplete: function () {
                      $("div.dtsp-verticalPanes").find('table').addClass("table-striped");
                  }
  
                 
              });
  
              // $('#chemicalTable').hide();
              // $('div#chemicalTable_info').hide();
  
              chemicalTable.searchPanes();
              $("div.dtsp-verticalPanes").append(chemicalTable.searchPanes.container());
              
          });
  
  
      </script>
  
• allan Posts: 62,003Questions: 1Answers: 10,164 Site admin

  February 2023

  Approved now.

  If you could link to a page showing the issue, that would be really helpful.

  Allan
• samithasony Posts: 6Questions: 1Answers: 0

  February 2023

  I haven't published the latest code on the website. I have it locally.
• allan Posts: 62,003Questions: 1Answers: 10,164 Site admin

  February 2023

  Hi,

  Based on your example JSON from your first post, I've put this little example together showing how SearchPanes can be used with the array from it: https://live.datatables.net/nafibako/2/edit .

  Let me know if that helps.

  Regards,
  Allan