How to directly set the Columns search value on Ajax load

webcliq

Please visualise the following scenario.

I have a table which obtains its data from the Server by an ajax request.

The table has individual text input boxes in the footer of the table corresponding to those columns which are defined as searchable.

I do not use the "keyup change clear" snippet to monitor changes as I do use in the non-ajax version of my Cliqon CMS table.

I have a search and clear icon embedded in my input field. This is the snippet of Javascript / jQuery code that responds to the search icon click event

                            $('i.searchicon').on('click', function(e) {
                                var inpt = $(e.target).data('column');
                                var searchval = $('input#search_column_'+inpt).val();
                                if(searchval != '') {
                                    console.log(cfg.dg.ajax.data);

                                    // some code such as - table.column(inpt).search(searchval);
                                    // or - table.columns[thiscol]['search]['value'] = searchval

                                    table.ajax.url(my.options.ajax.url).load();
                                }
                            });

I have simplified some of the variables such as "table" and "my.option".

One problem occurs that surprises me. The console.log of ajax.data, returns undefined.

Secondly and more importantly, I want to continue the process of individual column searching as far as the PHP script on the server which reads the request sent along with the POST. I also would not want to make it a GET request and alter the Url.

As part of the request, the value for the given Column should have been changed from empty to a valid string value.

Upon load, columns[3][search][value] = "" and upon the response to a valid search, should now read columns[3][search][value] = "searchrequest".

If you suggest that one should be using "search" and not "column[n][search]" then my response is, why have them both. From a serverside script point it is far easier to write a cumulative WHERE clause based on Columns than it is on the Search array. I can assemble the order of the WHERE clause based upon defaults in the configuration for that table, or in the Columns def.

There must be some way to manipulate the POST before it is sent, but modifying ajax.data is not one of them.

I would be grateful for your thoughts.

allan

One problem occurs that surprises me. The console.log of ajax.data, returns undefined.

I have no idea what cfg.dg is I'm afraid, so I don't know what the issue is there. If you give a link to the page I can take a look.

There must be some way to manipulate the POST before it is sent, but modifying ajax.data is not one of them.

Actually it is . Using ajax.data is the way to modify what DataTables is sending to the server. If that isn't working for you, please link to a test case showing the issue so we can help.

Allan

webcliq

Thankyou Allan for your response,

This version of Cliqon, which will be number 5, when I finish, is not yet available on any front facing server and it is difficult to separate out the components to generate just a test case. However I am sure that this is not a bug or anything it is just that I am not doing something correctly. My Datagrid works perfectly with pre-loaded Data. The problem is I must provide a Datatable with Ajax loaded data because in a multiuser situation, I must be as close to the latest data on the Server as I can be. I have not yet implemented record locking, but I may need to do so. Record locking will be implemented in my Form scripting not Datatable, as this is read-only.

cfg.dg should have been simplified to table as well. So I should have been logging "table.ajax.data". For the record, in my Javascript, I setup one configuration object "cfg", thus a Datatable without serverside processing should be cfg.dg and a Datatable with serverside processing is a cfg.dt. Likewise all JSON responses from the Server are cfg.data. Data for a Datatable is cfg.data.data and the configuration for a Datatable is cfg.data.options.

With that explanation, cfg.data.options.ajax.url, makes sense and so does cfg.dt.ajax.data. In Cliqon, a Datatable is a Service and it has a Service Configuration file in TOML. There are also collection and model TOMLs. All are merged together to create an array which is sent to the Client as JSON. The Datatable is opened in a popup window in this version of Cliqon.

Now with that explained, I can ask a supplementary question before creating a test case if one is needed.

I do not send JSON from the server, in cfg.data.options.ajax.data, that would be processed by the Datatable to become, internally to Datatable, cfg.dt.ajax.data. Thus it comes as no immediate surprise that the console.log shows it as empty.

However the definition of the footer search inputs is undertaken in initComplete where it is possible that I should be using this or that rather than using cfg.dt.ajax.data.

You say in your response that I should be using ...ajax.data. My question is, can you confirm that immediately previous to sending a POST request to obtain the data for the table, that in ....ajax.data, I should expect to find the columns definition, draw, search, start and everything else that the PHP script will read from the request.

For the record,here is the complete source for my Datable function:

     var _dataTable = function() {

        try {

            console.log('Loading dataTable');

            var cmn = cfg.args.common;
            cfg.dw.resize({
                width: cmn.winwidth,
                height: cmn.winheight
            }).reposition({
                my: 'left-top',
                at: 'left-bottom',
                of: 'header',
                offsetX: 10,
                offsetY: 10
            });

            // Static options here
            var options = {
                columns: cfg.data.columns,
                dom: `<''
                    <'#dthdr.row'
                        <'#dtbuttons.col-7'B>
                        <'#dtplength.col-5'l>
                    >
                    <'#dtbody.row'
                        <'#dttable't>
                    >
                    <'#dtftr.row'
                        <'#dtinfo.col-7'i>
                        <'#dtnav.col-5'p>
                    >
                >`,
                lengthMenu: [[10, 15, 20, 25, -1], [10, 15, 20, 25, 'All']],
                initComplete: function () {
                    var grid = document.getElementById("datatable");
                    var footer = grid.createTFoot();
                    var row = footer.insertRow(0);
                    for(var i = 0; i < count(cfg.data.columns); i++) {
                        var column = cfg.data.columns[i];
                        var cell = row.insertCell(i);

                        if(column.searchable === true) {
                            cell.innerHTML = `
                            <div class="input-control">
                                <input type="text" id="search_column_`+i+`" class="colSearch input-contains-icon" placeholder="Search" />
                                <span class="icon pointer">
                                    <i class="searchicon fas fa-fw fa-search bluec" data-column=`+i+` ></i>
                                    <i class="clearsearch fas fa-fw fa-times redc" data-column=`+i+` ></i>
                                </span>
                            </div>
                            `;

                            $('i.searchicon').on('click', function(e) {
                                var inpt = $(e.target).data('column');
                                var searchval = $('input#search_column_'+inpt).val();
                                if(searchval != '') {
                                    console.log(cfg.dt.ajax.data);

                                    // some code such as - table.column(inpt).search(searchval);
                                    // or - table.columns[thiscol]['search]['value'] = searchval

                                    cfg.dt.ajax.data = {'d_firstname': searchval};
                                    cfg.dt.ajax.url(cfg.data.options.ajax.url).load();
                                }
                            });

                            $('i.clearsearch').on('click', function(e) {
                                var inpt = $(e.target).data('column');
                                $('input#search_column_'+inpt).val('');
                                cfg.dt.ajax.reload();
                            });

                        };
                    };

                    // Fire a context menu
                    _cmenu(cfg.data.cmenu, '#datatable tbody');

                    // Events
                    $('#datatable tbody').on('click', 'tr', function(e) {
                        var id = $(this).attr('id');
                        $('tr').removeClass('softblue selected');
                        $('#' + id).addClass('softblue selected');
                        cfg.recid = id;
                    });   

                }
            };

            $.each(cfg.data.options, function(key, val) {
                options[key] = val;
            });

            cfg.dt = $('#datatable').DataTable(options);
            $.fn.DataTable.ext.pager.numbers_length = 3;

        } catch (err) {
            alert('Method _dataTable produced an error: ' + err.message);
        }

     };

allan

My question is, can you confirm that immediately previous to sending a POST request to obtain the data for the table, that in ....ajax.data, I should expect to find the columns definition, draw, search, start and everything else that the PHP script will read from the request.

ajax.data, as a function, will give you access to the data object that DataTables sends to the server when making an Ajax request. That might be empty (it is by default if you are using client-side processing), it will contain draw, search etc if you have server-side processing enabled (serverSide). You don't appear to have that option enabled, so I would expect the data object to be empty.

See also this example for ajax.data in action.

Allan