Loading js-grid then filtering data

Question

I have data being pulled from a db using php and then passed into javascript to load js-grid. I also have a dropdown populated with php containing the default value selected and stored by the user. My goal is to populate the grid with all data returned, then filter it based on the selected option in the dropdown.

I can't seem to understand how to load then filter data using js-grid.

<script type="text/javascript">var order_json = <?= $order_json ?>; var user_list = <?= $user_list['activeListId'] ?>;</script>
<script type="text/javascript" src="js/main.js"></script>

main.js

$( document ).ready(function() {
$("#jsGrid").jsGrid({
    width: "100%",
    height: "400px",

    inserting: false,
    editing: false,
    sorting: true,
    paging: false,
    pageSize: 30,

    noDataContent: "No orders found",

    data: order_json,

    fields: [
        { name: "OrderId", type: "number", title: "Order ID", visible: false },
        { name: "ListId", type: "number", title: "Order List ID", visible: true},
        { name: "Name", type: "text", title: "Order Name", align: "left"}
    ],
});
var grid = $("#jsGrid").data("JSGrid");
  grid.search({ListId: user_list})
});

I have tried some different approaches and none have worked. Any help would be appreciated.

In jsGrid it's not possible to search for multiple values, so if the value of `user_list` is a **list** of user ids (`[1, 2, 3]`) your search will return empty results. — Dekel, Jul 23 '16 at 23:17

score 4 · Accepted Answer · answered Jul 23 '16 at 23:17

With js-grid the actual filtering of the data should be implemented by developer. The filtering could be done on the client-side or server-side. Client-side filtering implemented in loadData method of controller. Server-side filtering is done by a server script that receives filtering parameters, and uses them to retrieve data.

Here is how your controller.loadData method could look like:

loadData: function(filter) {
    var d = $.Deferred();

    // server-side filtering
    $.ajax({
        type: "GET",
        url: "/items",
        data: filter,
        dataType: "json"
    }).done(function(result) {
        // client-side filtering
        result = $.grep(result, function(item) {
             return item.SomeField === filter.SomeField;
        });

        d.resolve(result);
    })

    return d.promise();
}

As for data option, it's used only for static grid data.

Worth to mention that it would be better to provide data to grid with a REST-y service (of course, it can be done with PHP). Here is the sample project showing how to use js-grid with a REST service on PHP https://github.com/tabalinas/jsgrid-php.

why the filter object is always null for me – Ghassen Jan 31 '20 at 09:12 — Ghassen, Jan 31 '20 at 09:12

score 0 · Answer 2 · answered Aug 28 '17 at 19:25

                    loadData: function (filter) {
                        criteria = filter;
                        var data = $.Deferred();
                        $.ajax({
                            type: "GET",
                            contentType: "application/json; charset=utf-8",
                            url: "/api/advertisements",
                            dataType: "json"
                            }).done(function(response){
                                var res = [];
                                if(criteria.Title !== "")
                                {
                                    response.forEach(function(element) {
                                        if(element.Title.indexOf(criteria.Title) > -1){
                                            res.push(element);
                                            response = res;
                                        }
                                    }, this);
                                }
                                else res = response;
                                if(criteria.Content !== "")
                                {
                                    res= [];
                                    response.forEach(function(element) {
                                        if(element.Content.indexOf(criteria.Content) > -1)
                                            res.push(element);
                                    }, this);
                                }
                                else res = response;                                    

                                data.resolve(res);
                            });
                        return data.promise();
                    },

You should probably annotate your code. It looks like a piece of some larger project and it's not clear how this answers the question. Also, please reduce the unnecessary indentation. Best regards — YakovL, Aug 28 '17 at 19:52

score 0 · Answer 3 · answered Aug 27 '19 at 13:32

Whenever filtering is involved the function loadData of the controller is called. There you can implement the filtering functionality that you want.

Here is an example of a generic filter that checks if the string you 've typed in the filter row is contained in your corresponding rows, works with numbers and other types as well

loadData: function (filter) {
    return $.get('your.url.here')
        .then(result => result.filter(row => Object.keys(filter).every(col => 
            filter[col] === undefined
            || ('' + filter[col]).trim() === ''
            || ('' + row[col]).toLowerCase().includes(('' + filter[col]).trim().toLowerCase())
        )))
}

If you're not getting your data from a server you can still use the loadData function as described here: https://github.com/tabalinas/jsgrid/issues/759

If you want to invoke filtering manually you can use the search function as described in the docs: http://js-grid.com/docs/#searchfilter-promise

Loading js-grid then filtering data

3 Answers3