How to get searchpanes to send requests to the server.

BillytheBob

Description of problem: Hi there, I am implementing server side processing and have discovered that, when using the table, and checking the network tab, that requests are not being sent to the server for searchpanes.

    $('#dt-employees').dataTable({
      "language": {
        "emptyTable": "No records to display"
      },
      responsive: true,
      searching: true,
      sorting: false,
      ordering: false,
      info: false,
      searchPane: true,
      dom:
        "<'row rowheader go-blue2'<'col-sm-12 col-md-2  d-flex white align-items-center toolbar'f><'col-sm-12 col-md-1 showing bottom'l<'clear'>><'col-sm-12 col-md-4 d-flex align-items-center justify-content-end'B><'col-sm-12 col-md-2 d-flex white align-items-center datatab_dropdown'f><'col-sm-12 col-md-3 d-flex align-items-center datatab_search justify-content-start'f>> " +
        "<'row TEST'<'col-sm-2 filters' P><'col-sm-10 tables'tr>>" +
        "<'row '<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
      buttons: [
        {
          extend: 'copyHtml5',
          text: ' Copy',
          className: 'copy-t go-blue2-btn2 btn-sm fal fa-copy',
          exportOptions: {
            columns: ':visible',
          }
        },
        {
          extend: 'excelHtml5',
              text: ' Excel',
            className: 'excel-t go-blue2-btn2 btn-sm fal fa-file',
          exportOptions: {
            columns: ':visible',
          }
        },
        {
          extend: 'colvis',
          text: ' Hide/Show',
        className: 'show-t go-blue2-btn2 btn-sm fal fa-eye-slash ',
          exportOptions: {
            columns: ':visible',
          }
        }
      ],
      ajax: baseurl+'contacts/list_emp_ssp',
      serverSide: true,
      columnDefs: [
        {
          targets: 0,
          dtOpts: {
              searching: false,
              info: false,
              clear: false
          },
        },
        {
          targets: [3,6,7,8,9,10,11,12,13,14,15,16,17,18],
          visible: false,
        },
        {"type":"html","targets":21,"render": function (data, type, row, meta) {
          var GOID = $('#GOID').val();
          if (row.LINK1) {
            render = "<a href='#DocumentModel' class='docGet' data-toggle='modal' data-iid='"+data+"'><div class='badge badge-info'><i class='font-medium-2 icon-line-height fa fa-edit'></i></div></a> &nbsp;<a href='"+baseurl+"userfiles/"+GOID+"/documents/"+row.LINK1+"' target='_blank' data-iid='"+data+"'><div class='badge badge-info'><i class='font-medium-2 icon-line-height fa fa-file'></i></div></a>"
          } else {
            render = "<a href='#DocumentModel' class='docGet' data-toggle='modal' data-iid='"+data+"'><div class='badge badge-info'><i class='font-medium-2 icon-line-height fa fa-edit'></i></div></a>"
          }
          return render},
          searchPanes: {
            show: false
          }
        }
        ],
        columns: [
          { "data": "NoFile" },
          { "data": "CompName" },
          { "data": "SITES" },
          { "data": "GENDER" },
          { "data": "PhoneCell" },
          { "data": "Email" },
          { "data": "BirthDate" },
          { "data": "LT1" },
          { "data": "ATTENDANCE" },
          { "data": "SKILLS" },
          { "data": "D6" },
          { "data": "Blood" },
          { "data": "NoPin" },
          { "data": "NoPassport" },
          { "data": "NoDrive" },
          { "data": "NoEntry" },
          { "data": "D5" },
          { "data": "Nation" },
          { "data": "NoTax" },
          { "data": "GROUP" },
          { "data": "STAT" },
          { "data": "id" }
        ],
        searchPanes: {
          columns:[2,19]
        }
    }); 

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

kthorngren

Not that it affects anything but searchPane: true, in line 10 is not a valid option so you can remove it.

What version of SearchPanes are you using? Support for Server Side Processing started in 1.1 and the latest version now is 2.1.2.

Your SearchPanes config works with SearchPanes 2.1.2 in this example:
https://live.datatables.net/qoliyehi/32/edit

You can see the SearchPanes parameters are sent in the Network tab. Note the server script doesn't support the SearchPanes server side protocol so there is nothing in the response for SearchPanes.

If you still need help please post a link to your page or a test case replicating the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

BillytheBob

Hi,
I am using SearchPanes 1.2.1

kthorngren

I looked here and there doesn't seem to be a 1.2.1 version available. Possibly it was posted and removed due to errors. My recommendation is to upgrade to the latest 2.1.2. Use the Download Builder for the upgrade.

Kevin

BillytheBob

I have the same issue as this user, I am willing to write my own server side script, however i need searchpanes to send the request.
Which it isnt sending for me

I can see it is working in your example.
https://datatables.net/forums/discussion/66655/empty-searchpanes-when-using-server-side-processing

kthorngren

As mentioned in that thread the 1.x versions don't seem to send the SearchPanes parameters on the first request. I updated my example to use 1.2.2 and its the same as you described.

Please update to the latest 2.1.2 version to get the SearchPanes parameters sent on the initial request. Also see this example.

Kevin

BillytheBob

I have upgraded to SearchPanes 2.1.2 do I also need to upgrade the standard datatables version as well?

I am still not able to get the request to the server from searchpanes, not matter how many requests are made.

$('#dt-employees').dataTable({ "language": { "emptyTable": "No records to display" }, responsive: true, searching: true, sorting: false, ordering: false, info: false, ajax: baseurl+'contacts/list_emp_ssp', serverSide: true, processing: true, columns: [ { "data": "NoFile" }, { "data": "CompName" }, { "data": "SITES" }, { "data": "GENDER" }, { "data": "PhoneCell" }, { "data": "Email" }, { "data": "BirthDate" }, { "data": "LT1" }, { "data": "ATTENDANCE" }, { "data": "SKILLS" }, { "data": "D6" }, { "data": "Blood" }, { "data": "NoPin" }, { "data": "NoPassport" }, { "data": "NoDrive" }, { "data": "NoEntry" }, { "data": "D5" }, { "data": "Nation" }, { "data": "NoTax" }, { "data": "GROUP" }, { "data": "STAT" }, { "data": "id" } ], dom: "<'row rowheader go-blue2'<'col-sm-12 col-md-2 d-flex white align-items-center toolbar'f><'col-sm-12 col-md-1 showing bottom'l<'clear'>><'col-sm-12 col-md-4 d-flex align-items-center justify-content-end'B><'col-sm-12 col-md-2 d-flex white align-items-center datatab_dropdown'f><'col-sm-12 col-md-3 d-flex align-items-center datatab_search justify-content-start'f>> " + "<'row TEST'<'col-sm-2 filters' P><'col-sm-10 tables'tr>>" + "<'row '<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>", buttons: [ { extend: 'copyHtml5', text: ' Copy', className: 'copy-t go-blue2-btn2 btn-sm fal fa-copy', exportOptions: { columns: ':visible', } }, { extend: 'excelHtml5', text: ' Excel', className: 'excel-t go-blue2-btn2 btn-sm fal fa-file', exportOptions: { columns: ':visible', } }, { extend: 'colvis', text: ' Hide/Show', className: 'show-t go-blue2-btn2 btn-sm fal fa-eye-slash ', exportOptions: { columns: ':visible', } } ], columnDefs: [ { searchPanes:{ show: true, }, targets: [2,19], }, {"type":"html","targets":21,"render": function (data, type, row, meta) { var GOID = $('#GOID').val(); if (row.LINK1) { render = "<a href='#DocumentModel' class='docGet' data-toggle='modal' data-iid='"+data+"'><div class='badge badge-info'><i class='font-medium-2 icon-line-height fa fa-edit'></i></div></a> &nbsp;<a href='"+baseurl+"userfiles/"+GOID+"/documents/"+row.LINK1+"' target='_blank' data-iid='"+data+"'><div class='badge badge-info'><i class='font-medium-2 icon-line-height fa fa-file'></i></div></a>" } else { render = "<a href='#DocumentModel' class='docGet' data-toggle='modal' data-iid='"+data+"'><div class='badge badge-info'><i class='font-medium-2 icon-line-height fa fa-edit'></i></div></a>" } return render}, searchPanes: { show: false } } ] });

allan

I'm not sure why that would be happening I'm afraid. Particularly as it appears to be working okay here.

Yes, I would suggest you update DataTables and any other extensions you are using to the latest versions. If that still doesn't allow it to work, then, please link to a page showing the issue so I can debug it.

Allan

BillytheBob

Here is the link to the login screen test.gowork.systems
I have sent you a private message with your login details

Many Thanks

allan

Thanks! The request to list_emp_ssp includes the following parameters:

searchPanes_options[cascade]=false
searchPanes_options[viewCount]=true
searchPanes_options[viewTotal]=false

The response however does not include an searchPanes object, which should contain the list of options to show in the panels (see docs here).

What are you using on the server-side for this? Have you implemented server-side processing for SearchPanes? I also notice that the draw parameter is missing from the JSON response. It isn't required, but it is a good idea to include it as it help prevent async returns of data.

Allan

BillytheBob

I can see the request if I use firefox, however on chrome, it isnt there, I will use the draw parameter in the JSON response.
I am using Codeigniter 3 for me backend.
Thanks.

kthorngren

however on chrome, it isnt there

Does this example show the SearchPanes parameters when using Chrome? Maybe clear the cache to make sure the latest SearchPanes is being loaded and not the old cached version.

Kevin