Problems trying to use search panes with custom panes/functions

KMiller68

I'm trying to incorporate a custom search pane with several custom search functions in it. While I can get the custom pane to appear, the functions, which seem like they should work correctly, do not. Each returns 0.

The data table I'm searching has columns 3 and 6, each tied to a database column which can be anything from 0 to 4. I tried adapting some example code as shown partially below, but, again, the functions don't work. I have an existing set of searches built in elsewhere which work, but currently do not show any type of "busy" indicator which these search panes do. Note that the stock panes DO work, but I don't want to wind up with three panes taking up space on the page.

Here's the beginning of the table declaration in the JS. I'm new to this particular function within a data table, but I really don't understand what I'm doing wrong:

    function bindDataTable(srvid, databaseid, schemaid, captureid, captureid2) {

        const url = `/Home/GetObjectListing?srvid=${srvid}&dbid=${databaseid}&schemaid=${schemaid}&captureid=${captureid}&captureid2=${captureid2}`

        //alert('URL is :' + url
        //);

        let datatable = $('#tblObjects')
            .DataTable({
                "ajax": { url, dataSrc: "" },
                searchPane: true,
                columnDefs: [


                { "width": "4%", "className": "text-center", targets: 3 },
                { "width": "4%", "className": "text-center", targets: 2 },
                { "width": "4%", "className": "text-center", targets: 1 },
                { "width": "4%", "className": "text-center", targets: 0 },

                ],

                searchPanes: {
                    panes: [{
                        header: 'custom',
                        options: [
                            {
                            label: 'Tables',
                            value: function (rowData, rowIdx) {
                                return rowData[3] ===  0;
                            }
                            },

                                                        {
                                label: 'Views',
                                value: function (rowData, rowIdx) {
                                    return rowData[3] === 1;
                                }
                            }

                        ]
                    }]
                },
                targets: [3],



                "serverSide": false,
                "dom": 'Pfrtip',
                "processing": true,
                "searchable": true,
                "select": false,
                "single": true,

kthorngren

Seems like the above code would result in syntax errors. Looks like the custom options definition is not inside columnDefs. I think you will need something more like this:

        columnDefs: [
 
 
            { "width": "4%", "className": "text-center", targets: 3 },
            { "width": "4%", "className": "text-center", targets: 2 },
            { "width": "4%", "className": "text-center", targets: 1 },
            { "width": "4%", "className": "text-center", targets: 0 },
 
            {
              searchPanes: {
                  panes: [{
                      header: 'custom',
                      options: [
                          {
                            label: 'Tables',
                            value: function (rowData, rowIdx) {
                                return rowData[3] ===  0;
                            }
                        },
 
                        {
                            label: 'Views',
                            value: function (rowData, rowIdx) {
                                return rowData[3] === 1;
                            }
                        }
 
                      ]
                  }]
              },
              targets: [3],
            }
        ],

Move the searchPanes object inside the [] for columnDefs and add a set of {} around it.

Kevin

KMiller68

I've replaced my original code with what you've shown here, and while that did move things further along, it still isn't working as expected.
Here's what I have currently. The data in this table is evenly split between object type 0 and 2, so I've altered the original code to match.

The built-in filters work properly, but these two new ones, in their custom panel, return this as shown here. I'm not sure what the 0 and 2 mean in this context, but it's also not returning any counts as do the other filters.

 function bindDataTable(srvid, databaseid, schemaid, captureid, captureid2) {

     const url = `/Home/GetObjectListing?srvid=${srvid}&dbid=${databaseid}&schemaid=${schemaid}&captureid=${captureid}&captureid2=${captureid2}`

     //alert('URL is :' + url
     //);

     let datatable = $('#tblObjects')
         .DataTable({
             "ajax": { url, dataSrc: "" },
             searchPane: true,
             columnDefs: [


                 { "width": "4%", "className": "text-center", targets: 3 },
                 { "width": "4%", "className": "text-center", targets: 2 },
                 { "width": "4%", "className": "text-center", targets: 1 },
                 { "width": "4%", "className": "text-center", targets: 0 },

                 {
                     searchPanes: {
                         panes: [{
                             header: 'custom',
                             options: [
                                 {
                                     label: 'Tables',
                                     value: function (rowData, rowIdx) {
                                         return rowData[5] === 0;
                                     }
                                 },

                                 {
                                     label: 'Procs',
                                     value: function (rowData, rowIdx) {
                                         return rowData[5] === 2;
                                     }
                                 }

                             ]
                         }]
                     },
                     targets: [5],
                 }
             ],



             "serverSide": false,
             "dom": 'Pfrtip',
             "processing": true,
             "searchable": true,
             "select": false,

KMiller68

Correction to my comment above; the counts are there, but clicking the filter options shows me an empty gride