Фильтрация данных Json в таблицах HTML и Django - PullRequest
Новая
       11

Фильтрация данных Json в таблицах HTML и Django

0 голосов
/ 23 октября 2019

Я добавил Datatable на страницу моего проекта Django. Предполагается, что в этих таблицах показаны некоторые данные, полученные из конечной точки API Django Rest Framework.

Вот как выглядит пример полученных данных: 

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

Я хочу отфильтровать эти записитак что в таблице показаны только те, для которых Status установлено в Free, но я не знаю, как это сделать из Jquery.

Вот код, который я использую для загрузки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 );
});

Я пытался добавить оператор if для проверки data.Pair внутри вызова Ajax, но он дал мне undefined. Есть ли другой способ сделать это? Любой совет приветствуется

1 Ответ

1 голос
/ 23 октября 2019

Вы можете сделать это следующим образом:

  1. найдите метод filter . Код :

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

Затем выполните фильтрацию следующим образом: 

var filteredData = table
    .column( 2 )
    .data()
    .filter( function ( value, index ) {
        return value == "Free";
    } );
Вы можете ajax к API и прикрепить отфильтрованный ответ к вашему конструктору данных (однако, поскольку вы используете серверную часть, я предполагаю, что вы выполняете нумерацию страниц со стороны сервера, поэтому вам потребуется изменить следующий код для работы с этим)

Код:

$.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"} ] }); } })

Редактировать: После выполнения jsfiddle я понимаю, что мне не хватает метода удаления дляПервый вариант, так что вот исправление: 

 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();

jsfiddle

Надеюсь, это поможет =)

...