Filter Json data in Html datatables and Django

Question

I added a Datatable to a page of my Django project. This tables is supposed to show some data retrieved from a Django Rest Framework API endpoint.

Here is how a sample of the data retrieved looks like:

{
    "item": "Someitem",
    "Price": 120,
    "Status": "Free"
},
{
    "item": "SecondItem,
    "Price": 90,
    "Status": "Taken"
},

I want to filter these records so that only the ones with the Status set to Free are shown in the table, but i don't really know how to do that from Jquery.

Here is the code i use to load the table:

$(document).ready(function() {

    var table = $('#mydb').DataTable({
        "serverSide": true,             
        "ajax": "/myapi/?format=datatables",
        "columns": [

            {data: "item",
            {data: "Price"},

        ]
    });
    setInterval( function () {
    table.ajax.reload();
}, 10000 );
});

I tried to add an if statement to check data.Pair inside the Ajax call, but it gave me an undefined. Is there any other way to do this? Any advice is appreciated

Wouldn't it probably be a better idea if your server-side API provided a way to filter the entries? Otherwise, the official docs on column filtering will surely help you. — Sarah Groß
– Sarah Groß, Commented Oct 23, 2019 at 17:17

stan chacon · Accepted Answer · 2019-10-23 18:24:39Z

1

You can do this this way:

look for the filter method. Code:

var table = $('#mydb').DataTable({ "serverSide": true, "ajax": "/myapi/?format=datatables", "columns": [ {data: "item", {data: "Price"}, {data:"Status"} ] });

Then filter like this:

var filteredData = table
    .column( 2 )
    .data()
    .filter( function ( value, index ) {
        return value == "Free";
    } );

You could ajax to the api and attach the filtered response to your datatable constructor (however since you use serverside I assume you are paginating from server side so you will need to change the following code to work with that)

Code:

$.ajax({ url: "/myapi/?format=datatables", type: 'GET', dataType: 'JSON' }) .done((response)=>{ if(response != undefined){ let data = response.data, filtered_data = []; $.each(data,function(index,value){ if(value.Status == "Free"){ filtered_data.push({ "item": "Someitem", "Price": 120 }); } })//end each //fill the table var table = $('#mydb').DataTable({ "serverSide": true, "data": filtered_data, "columns": [ {data: "item", {data: "Price"} ] }); } })

Edit: After doing a jsfiddle I realize that I miss the remove metthod for the first option so here is the fix:

 var filteredData =  table
    .rows()
    .indexes()
    .filter( function ( index, value ) {
    console.log(table.row(value).data().Status);
       return table.row(value).data().Status == "Taken"; 
    } );
table.rows( filteredData )
.remove()
.draw();

The jsfiddle

Hope it helps =)

edited Oct 23, 2019 at 18:24

answered Oct 23, 2019 at 17:50

stan chacon

7681 gold badge7 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jack022 Over a year ago

Hey! Thanks for your answer! Just one thing: the second snippet of code (var filterdata ... ) on which part of the jquery function should go?

stan chacon Over a year ago

You assing it in the same let clause with data.

Jack022 Over a year ago

Ok! Tried this, but the table is showing blank. Trying to understand why.

stan chacon Over a year ago

@Jack022 I made an edit to the answer also I add a jsfiddle hope it helps

Collectives™ on Stack Overflow

Filter Json data in Html datatables and Django

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related