Custom search filter - Serverside

goktuginal41@gmail.com

Hello everyone,

I have a problem that I don't know how to fix it. I want to display the dates in the date column on the screen within the date range I want.(min < x < max) I've come this far and I don't know what to do next. And obviously it is not working right now. Can you help me with that? Thank you in advance.

<input class="rounded-3" type="text" id="min" name="min" placeholder="Min date:">
<input class="rounded-3" type="text" id="max" name="max" placeholder="Max date:">

$(document).ready(function() {
 table = $('#records').DataTable({
 'serverSide': true,
 ajax: {
    url: '/api/base/?format=datatables',
    data: function (d) {
        d.date_min = $('#min').val();
        d.date_max = $('#max').val();
    }
 },
 'columns': [
       {"data": null,
              render: function ( data, type, row ) {
                   return '<a class="btn btn-outline-success text-center" id="edit" title="Edit row" data-bs-toggle="modal" data-bs-target="#editModal"><i class="fa-solid fa-pen-to-square" style="color:green !important;"></i></a>';
               }
         },
         {'data': 'p_id_s'},
         {'data': 'date'},]

allan

Looks good to me so far - that will submit date_min and date_max to the server side script for processing. So the next thing to do is make sure that /api/base/?format=datatables will accept those parameters and use them as part of the queries that it makes.

Allan

goktuginal41@gmail.com

Hi Allan,

How can I make sure that? I checked /api/base/?format=datatables json but there are no date_min or date_max.

Do I need to call those parameters in ready function to re-draw the table?

And I have a button to make that search.

<button class="btn btn-outline-secondary" type="button" id="search_date">DATE</button>

$('#search_date').click(function () {
   // draw()
        });

kthorngren

How can I make sure that?

Use the browser's network inspector tool to look at the parameters sent in the request. Along with the server side processing parameters you should see both date_min and date_max. Do you see those parameters?

Do I need to call those parameters in ready function to re-draw the table?

Using ajax.data as a function, like you have, is all you need.

Any search, sort or paging action will send a request to the server and include those parameters. You can use draw() to programmatically send a request to the server, for example:

$('#search_date').click(function () {
   table.draw();
});

Your server script will then need to get those parameters to use in the queries. The exact mechanism to get the parameters is based on the language your server script is using.

Kevin

goktuginal41@gmail.com

I used inspector and click /api/base/?format=datatables under the network section. But there were no both parameters. Only below data:

"recordsTotal": 4359,
"recordsFiltered": 4359,
    "data": [
       ....
     ],
    "draw": 1
}

Use the browser's network inspector tool to look at the parameters sent in the request. Along with the server side processing parameters you should see both date_min and date_max. Do you see those parameters?

allan

That's the response from the server. Look at the "parameters", "header" or perhaps some other section name to see what was sent to the server.

Does the server-side code for /api/base/?format=datatables expect those two parameters? And will it process them?

Allan

goktuginal41@gmail.com

I could find 'query string parameters' section and there were no those parameters there. There are data of the columns in the datatable.

format: datatables
draw: 1
columns[0][data]: 
columns[0][name]: 
columns[0][searchable]: true
columns[0][orderable]: true
columns[0][search][value]: 
columns[0][search][regex]: false
columns[1][data]: p_id_s
....
columns[95][data]: id
columns[95][name]: 
columns[95][searchable]: true
columns[95][orderable]: true

That's the response from the server. Look at the "parameters", "header" or perhaps some other section name to see what was sent to the server.

I'm not sure I fully understand this. I have 96 data (columns) and I am performing CRUD operations on them.(Django) I also created a section at the top left of the screen for the date range and I want to display the rows between these two dates in the datatable. It was easy with client-side but I need server-side processing because of huge amount of data I have.

Does the server-side code for /api/base/?format=datatables expect those two parameters? And will it process them?

goktuginal41@gmail.com

Hi Allan,

I found the problem over there. I just added. Now, I can see the parameter with inspector.

return d;

The next, below code would be enough to display desired date range?

$('#search_date').click(function () {
   table.draw();
});

kthorngren

below code would be enough to display desired date range?

Yes, it will cause an ajax request to be sent to the server which will execute the ajax.data function which will get the input values to send to the server.

Kevin

goktuginal41@gmail.com

Thanks for your patience, but I have one-two more questions. Because I could not do it.

Do not I need to implement if statement which checks date between date_min and date_max to draw it?

I am a bit lost and also, how will the program understand that I filtered the date ranges in the second column?

kthorngren

When you use draw() with server side processing an ajax request is sent to the server to get the rows to be displayed on the page. The server will respond with the rows to display and other information for Datatables to understand the number of records and display the proper paging buttons. See the Server Side Processing protocol docs for details.

The additional parameters will be sent to the server script. You will need to update your Django script to retrieve the parameters to use them has part of the data query for the date range. The Django script will return the rows to display and additional information as described in the above link. Datatables will display the rows.

There is nothing else to do on the client side.

Kevin