But however, the render option, which is a custom function to style some fields in the table in a custom way (like as badges, etc., and above all: localization), is not called together with the SearchPane. Only the data in the table itself is rendered as intended:

With my prior implementation which did not use serverside scripting, the rendering works just fine: The SearchPanes show exact the same entries' styling like the table.

Any ideas?

The rendering of the column in the actual table is done using a processing trigger at the end:

            $('#resultTable').on('processing.dt', function (e, settings, data) {
                setTimeout(function(){
                    $(".rating").rating({theme:'krajee-svg', min:0, max:5, step:.5, displayOnly:!0, showCaption:!1, showClear:!1, showCaptionAsTitle:!1, size:'sm'});
                    $('#resultTable').DataTable().columns.adjust().draw();
                }, 500);
            } );

Without select

With select

The actual column is as displayed rendered in both cases.

KR,
Björn Hasselberg

My record count is over 7,000 with 30 fields, which makes the table very slow to load—it takes about 20 seconds. To improve performance, I switched to a server-side approach. The table uses both searchPanes and searchBuilder. While searchBuilder performs well, using searchPanes causes significant lag, especially when loading more than 20 fields in searchPanes, which also takes around 20 seconds. This essentially negates the benefits of switching to server-side processing. Is there any way to speed up searchPanes when using the server-side approach?

Or do I need to add that myself to the data request? (seems inflexible when it's defined client-side).

We use our own API rather than Editor's libraries, and I'm not understanding the sent parameters, which seem to not include SearchPanes client-side configuration (i.e. for which fields should the server send searchPanes options data)?

Looking at the Editor example, it seems that the searchPaneOptions are set there, without regard for what the client has requested (what fields are enabled for SearchPanes).

I've tried setting targets client-side and this is not transmitted in the initial payload:

            "searchPanes": {
                show: true,
                initCollapsed: true,
                dtOpts: { select: { style: 'multi' } },
                viewTotal: false,
                targets: [1, 2, 3]
            },

and I've tried setting searchPanes in columns client-side (which I prefer):

               {
                    "data": "sr", 
                    "title": "HD", 
                    "visible": false, 
                    "searchPanes": {show: true}
               }, 

but in both cases the explicit columns relevant for SearchPanes options are not sent in the payload, neither in columns nor in searchPanes object, during initial ajax (pageload) ...

    "searchPanes": {},
    "searchPanes_null": {},
    "searchPanes_options": {
        "cascade": false,
        "viewCount": true,
        "viewTotal": false
    }

When paging, then the payload for searchPanes object is not empty, but it includes all columns, not just the targets:

    "searchPanes": {
        "sr": {},
        "ss": {},
        "cty_desc": {},
        "regtown": {}
    },
    "searchPanes_null": {
        "sr": {},
        "ss": {},
        "cty_desc": {},
        "regtown": {}
    },
    "searchPanes_options": {
        "cascade": false,
        "viewCount": true,
        "viewTotal": false
    }

SearchPanes doesn't consume returned data the same way that DataTables does?

We have this error when using DataTables 2.2.2 with POST and SearchPanes:

"Uncaught TypeError: Cannot create property 'searchPanes' on string '{"draw":1,"columns":[{"data":null,"name":"","searchable":false,"orderable":false,"search":{"value":"","regex":false}}, ..."

The error is also documented here (but not a specific solution): We have this error: https://stackoverflow.com/questions/77555721/datatables-error-using-searchpanes-and-serverside-with-post-ajax-request

Per https://datatables.net/reference/option/ajax.data we always use this ajax syntax:

new DataTable('#myTable', {
    ajax: {
        url: 'data.json',
        contentType: 'application/json',
        type: 'POST',
        data: function (d) {
            return JSON.stringify(d);
        }
    }
});

Apparently data with JSON.stringify is the culprit when using serverSide and POST?

If we need to switch to using "ajax": function (data, callback, settings) {} then what is the equivalent of the simple ajax setting to setting the url and type?

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

After some research, I used searchPanes options like this

{
        searchPanes: {
          show: true,
          options: [
            {
              label: 'Closed',
              value: function (rowData, rowIdx) {
                return rowData.issue.is_closed == 1;
              }
            },
            {
              label: 'Open',
              value: function (rowData, rowIdx) {
                return rowData.issue.is_closed == 0;
              }
            }
          ]
        },
        targets: [8]
},

However, the filter does not work properly with options!

Any suggestion is appreciated.

currently, I am updating a project from PHP7 > PHP8 and Symfony 5 > Symfony 7. The project uses DataTables and DataTables Editor and worked fine.

But during this update process, after compiling the sources using yarn encore dev|prod, I am getting some weird errors in the console:

777.4baf86e1.js:2 jQuery.Deferred exception: Cannot read properties of undefined (reading '_select') TypeError: Cannot read properties of undefined (reading '_select')
    at r.A.select.init (http://kla-backend.ddev.site/build/398.8c9db4fd.js:2:5270)
    at HTMLDocument.<anonymous> (http://kla-backend.ddev.site/build/398.8c9db4fd.js:2:14281)
    at HTMLDocument.dispatch (http://kla-backend.ddev.site/build/777.4baf86e1.js:2:55226)
    at g.handle (http://kla-backend.ddev.site/build/777.4baf86e1.js:2:53217)
    at Object.trigger (http://kla-backend.ddev.site/build/777.4baf86e1.js:2:85227)
    at HTMLTableElement.<anonymous> (http://kla-backend.ddev.site/build/777.4baf86e1.js:2:85825)
    at E.each (http://kla-backend.ddev.site/build/777.4baf86e1.js:2:18457)
    at E.fn.init.each (http://kla-backend.ddev.site/build/777.4baf86e1.js:2:16936)
    at E.fn.init.trigger (http://kla-backend.ddev.site/build/777.4baf86e1.js:2:85800)
    at re (http://kla-backend.ddev.site/build/398.8c9db4fd.js:2:150377) undefined

777.4baf86e1.js:2 Uncaught Error: SearchPane requires Select
    at new t (398.8c9db4fd.js:2:238709)
    at Object.C [as fnInit] (398.8c9db4fd.js:2:258284)
    at 398.8c9db4fd.js:2:132738
    at Array.forEach (<anonymous>)
    at 398.8c9db4fd.js:2:132697
    at St (398.8c9db4fd.js:2:132768)
    at 398.8c9db4fd.js:2:138679
    at Kt (398.8c9db4fd.js:2:147944)
    at 398.8c9db4fd.js:2:138444
    at Ot (398.8c9db4fd.js:2:138454)
777.4baf86e1.js:2 Uncaught TypeError: Cannot read properties of undefined (reading '_select')
    at r.A.select.init (398.8c9db4fd.js:2:5270)
    at HTMLDocument.<anonymous> (398.8c9db4fd.js:2:14281)
    at HTMLDocument.dispatch (777.4baf86e1.js:2:55226)
    at g.handle (777.4baf86e1.js:2:53217)
    at Object.trigger (777.4baf86e1.js:2:85227)
    at HTMLTableElement.<anonymous> (777.4baf86e1.js:2:85825)
    at E.each (777.4baf86e1.js:2:18457)
    at E.fn.init.each (777.4baf86e1.js:2:16936)
    at E.fn.init.trigger (777.4baf86e1.js:2:85800)
    at re (398.8c9db4fd.js:2:150377)


I didn't change anything regarding the initialisation of the DataTables, nor change the entry points or something. It seems, as if there is one small change somewhere that produces the error.

DataTables and its extensions are added with yarn.

The setup is (more or less allways the same) like this (select: true was added by myself AFTER the error occurred, but did not change anything):

import 'datatables.net-select'
import 'datatables.net-searchpanes'
import 'datatables.net-editor'

(...)

$(document).ready(function () {
    const body = $('body');

    const selector = '#categories-datatable'
   
    (...)

    // @ts-ignore
    let table = $(selector).DataTable({
        select: true,
        ajax: {

(...)

Anybody an idea what's wrong here?

on this filedatatables.js
on this line

else if (ajax.url === '') {
     // No url, so don't load any data. Just apply an empty data array
    // to the object for the callback.
    var empty = {};
    DataTable.util.set(ajax.dataSrc)(empty, []);
    callback(empty);
}

After troubleshooting, I found out that having default value for serverSide is the reason

$.extend( true, $.fn.dataTable.defaults, {
    serverSide: true,
});

how to fix this while keeping the default serverSide: true,

I don't know if there is a solution for this, but I would like the entries with the counter at zero to be automatically deselected and the panes to be redrawn.

In the example I linked above, if I select New York and San Francisco together (multiple selection) and then select Customer Support I would like San Francisco to be deselected and the pane to only show New York selected (just as if San Francisco were clicked again to deselect it).

I tried to fix the problem for hours, but to no avail.
I found various discussions on how to select a row in panes, but I don't know how to point the counter to create an if condition. I don't even know if it's the most suitable method.

Another small "problem":
I use this config with a very simple custom render function:

searchPanes: {
    viewTotal: true,
  layout: 'columns-1',
   columns: [0,1,17],
   initCollapsed: true,
   orderable: false,
   cascadePanes: true,
  dtOpts: {
select:{
style: 'multi'
},
    columnDefs: [{
      targets: 0,
      render: function(data, type) {
        if (data === null) {
          return type === 'display' ? 'none' : data;
        } else {
          return type === 'display' ? '' + data : data;
      }
      },
    }],
  },
},

How can I include the counter of found entries as in the default configuration?
Tried everything but the right code. ^_^'

I'm using Datatables 1.10 and SearchPanes 2.2.0 with Foundation.

Thank you very much in advance to anyone who wants to help me.

<script>
    var table;

    $(document).ready(function () {
        let table = new DataTable('#example', {
            
           
            layout: {
                top1: 'searchPanes'
            },

            dom: 'PBlfrtip',

            searchPanes: {
                viewTotal: true,
                layout: 'columns-3',
                columns: [2, 3, 4],
                threshold: 1
            },
            
            }
        )

      //  table.searchPanes.rebuildPanes();

    });
</script>
<div class="text-center">
   
    <table id="example" class="display nowrap" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start Date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011-04-25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011-07-25</td>
                <td>$170,750</td>
            </tr>
           
            <tr>
                <td>Gloria Little</td>
                <td>Systems Administrator</td>
                <td>New York</td>
                <td>59</td>
                <td>2009-04-10</td>
                <td>$237,500</td>
            </tr>
            <tr>
                <td>Bradley Greer</td>
                <td>Software Engineer</td>
                <td>London</td>
                <td>41</td>
                <td>2012-10-13</td>
                <td>$132,000</td>
            </tr>
         
            <tr>
                <td>Vivian Harrell</td>
                <td>Financial Controller</td>
                <td>San Francisco</td>
                <td>62</td>
                <td>2009-02-14</td>
                <td>$452,500</td>
            </tr>
            <tr>
                <td>Timothy Mooney</td>
                <td>Office Manager</td>
                <td>London</td>
                <td>37</td>
                <td>2008-12-11</td>
                <td>$136,200</td>
            </tr>
            <tr>
                <td>Jackson Bradshaw</td>
                <td>Director</td>
                <td>New York</td>
                <td>65</td>
                <td>2008-09-26</td>
                <td>$645,750</td>
            </tr>
            <tr>
                <td>Olivia Liang</td>
                <td>Support Engineer</td>
                <td>Singapore</td>
                <td>64</td>
                <td>2011-02-03</td>
                <td>$234,500</td>
            </tr>
            <tr>
                <td>Bruno Nash</td>
                <td>Software Engineer</td>
                <td>London</td>
                <td>38</td>
                <td>2011-05-03</td>
                <td>$163,500</td>
            </tr>
            <tr>
                <td>Sakura Yamamoto</td>
                <td>Support Engineer</td>
                <td>Tokyo</td>
                <td>37</td>
                <td>2009-08-19</td>
                <td>$139,575</td>
            </tr>
            <tr>
                <td>Thor Walton</td>
                <td>Developer</td>
                <td>New York</td>
                <td>61</td>
                <td>2013-08-11</td>
                <td>$98,540</td>
            </tr>
            <tr>
                <td>Finn Camacho</td>
                <td>Support Engineer</td>
                <td>San Francisco</td>
                <td>47</td>
                <td>2009-07-07</td>
                <td>$87,500</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start Date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
    </table>

</div>

With Scroller:

Without Scroller:

Issue seems to be that this CSS is what is surfacing on the SearchPane window:

This is with DataTables 2.0.2, SearchPanes 2.3 and Scroller 2.4.1

I am using DataTables Editor PHP 2.2.0. When I utilize the label function of SearchPaneOptions with an array, the JSON result always returns a string with the first element of the array, as if I used the function with only a string.

For Example :

->searchPaneOptions( SearchPaneOptions::inst()
->table('cours')
->value('inscription_id')
->label(['inscription.prenom_eleve', 'inscription.nom_eleve', 'inscription.instrument'])
->where(function ($q) use ($prof_id) {
$q->where('cours.professeur_id', $prof_id, '=');
})
->leftJoin('inscription', 'inscription.id_inscription', '=', 'cours.inscription_id')
/->render(function ($row) {
return $row['inscription.prenom_eleve'].' '.$row['inscription.nom_eleve'].' ('.$row['inscription.instrument'].')';
})/

)

In this example, I commented out the render function because the result is not an array, but a string with the first element of the array label (inscription.prenom_eleve).

Is this a bug or am I misunderstanding something?

Thx

I'm creating something similar to the "Age" search pane from the example at https://datatables.net/extensions/searchpanes/examples/customFiltering/customOptionConditions.html
This adds custom entries in a search pane, by providing a label and a value function, which is all working nicely.
Now, I'm not yet happy with the order of these labels in the search pane.
The example also shows this nicely: The "Under 20" label is shown below the "Over 60" label, whereas I would like to have it as the first entry in the search pane, to have a much more logical order.
So, my question: How can I change the order of the labels in such a custom search pane?

Thanks!

$entriesKeys = array_map(function ($e) {
return is_object($e) ? $e->value : $e['value'];
}, $entriesRows);

    initComplete: function () {
        // Loop through SearchPane inputs to adjust placeholder text to remove HTML.
        $('.dtsp-searchPane').find('input').each(function( index ) {
            var placeholder = $( this ).attr('placeholder');
            $( this ).attr('placeholder', placeholder.replace('<br>',' ').replace('\n',' '))
        });
    }

It works great.

Would be a nice feature option to be able to specify to remove any formatting and only show the text.

4 of 13 datatable columns are defined with data: null like

            {
                data: null,
                name: "Overview",
                orderable: false,
                searchable: false,
                className: "myVerticalAlignMiddle",
                visible: false,
                "render": function (data, type, row, meta) {
                    return CreateMetaImgTagString(data.Guid, "overview");
                },
                searchPanes: {
                    show: false
                }
            }

to show some images and buttons. At server side the data is fetched by

            var response = new DataTables.Editor(db, "MyTable", "Id")
                .Model<IncomingDTE>()
                    .Field(new Field("MyField").SearchPaneOptions(new SearchPaneOptions()))
                    .Debug(true)
                    .TryCatch(true)
                .Process(Request)
                .Data();

to include the data for my searchpane column MyField.

But I get an NullReferenceException in SearchPaneOptions.cs in method Excec() at line

string fieldName = fields[i].Name();

Not surprising because the last 4 of 13 elements in the fields array are null. C# debugger output:

{DataTables.Field[13]}
    [0]: {DataTables.Field}
    .....
    [8]: {DataTables.Field}
    [9]: null
    [10]: null
    [11]: null
    [12]: null

How can I exclude the 4 datatable columns at server side which are defined with data: null at client side to prevent the exception? Something like

        searchPanes: {
            columns: [3]
        }

does not change anything.

Note: Without the line

 .Field(new Field("MyField").SearchPaneOptions(new SearchPaneOptions()))

at server side the table is shown as expected. But the search pane is empty.

Thanks a lot for your help!

let editor = new Editor(db, 'a', 'a.id') .fields([ new Field('a.STOCKSTATUS').searchPaneOptions(new SearchPaneOptions().where(function () { this.whereNotNull('a.STOCKSTATUS') })), new Field('a.ACTIVE'), new Field('b.VACUUMRANGE').options( new Options().table('b').value('ID').label('VACUUMRANGE') ), ]) .leftJoin('b', 'b.PARTNO', '=', 'a.PARTNO') .write(false);

I am getting the following error:
field.dbField is not a function

Am I just doing something wrong, or are joins not supported in server-side SearchPanes?

Thanks,
Dave

There are no errors, no way I can replicate this somewhere else.

Simply, there are more items that are supposed to be shown. the scroll area is big enugh. Only after sorting that specific pane, sometimes the missing data appears.

Any clue on this? or maybe somebody has a way to relicated this ?

Any help you can offer, I would appreciate.

Thanks,

Larry

If they are supported, is there a different syntax to get them to work? I got a test partially working (returns "undefined" and the correct number of results) by using the following:

    "searchPanes": {
        show: true,
        header: 'Vacuum Range',
        options: [
            {
                value: function(rowData, rowIdx) {
                    console.log(rowData.VACUUMRANGETOTAL);
                    return true;
                }
            }
        ]
    }

According to the examples at https://datatables.net/extensions/searchpanes/customSearchFunctions, though, I should be able to use rowData[0].

If this is not currently supported, any idea when it will be?

An unhandled exception occurred while processing the request.
InvalidCastException: Unable to cast object of type 'System.Int32' to type 'System.Nullable`1[System.Int64]'.
DataTables.SearchPaneOptions.Exec(Field fieldIn, Editor editor, List<LeftJoin> leftJoinIn, DtRequest http, Field[] fields) 

I made a GitHub repo with the demo code with my modifications for running in Minimal API, with the specific endpoint here

The test result seems to indicate a vulnerability because it shows that values can be appended to parameter values,
indicating that they were embedded in an SQL query.

I am using SearchPanes to filter employee information based on their organization, pay plan, etc. and the scanner is saying because they can append data to the selected value parameter it fails. The server will reject the message from the user so its not a true SQL injection but here we are.

Anyway, the question is: can you inspect the data before it is sent to the server? Ideally I could use a regex library to remove hazardous characters etc.

Thanks!

For example, If I filter to see municipalities with populations of less than 500, and I would like to see that printed on the exported report so anyone reading the report knows the basis of the report, i.e. All municipalities with less than 500 population

Any help you can offer would be greatly appreciated

Thanks,

Larry