tabalinas / jsgrid

Lightweight Grid jQuery Plugin
http://js-grid.com
MIT License
1.53k stars 353 forks source link

Loading by Page + Ajax #1433

Open AVitse opened 5 months ago

AVitse commented 5 months ago

Hi,

It's been a long time since I posted on jsgrid.

To manage the data correctly, I am interested in using the 'Loading by Page' example with AJAX response.

Actually, I load all data at jsgrid loading.

    controller: {
            loadData: function (filter) {
                var deferred = $.Deferred();
                // server-side filtering
                $.ajax({
                    type: "GET",
                    url: "script-backend.php",
                    data: filter,
                    dataType: "json"
                }).done(function (result) {
                    // client-side filtering
                    result = $.grep(result, function (item) {
                        return (!filter.col1|| item.col1.indexOf(filter.col1) > -1 || item.col1.toLowerCase().indexOf(filter.col1) != -1)
                            && (!filter.col2|| item.col2.indexOf(filter.col2) > -1 || item.col2.toLowerCase().indexOf(filter.col2) !=-1)
                            && (!filter.col3|| item.col3.indexOf(filter.col3) > -1 || item.col3.toLowerCase().indexOf(filter.col3) != -1)
                    });
                    deferred.resolve(result);
                })
                return deferred.promise();
            },
            insertItem: function(item) {
                var deferred = $.Deferred();
                $.ajax({
                    type: "POST",
                    url: "script-backend.php",
                    data: item
                }).done(function(d) {
                    deferred.resolve(d);
                    $("#jsGrid").jsGrid("loadData");
                });
                return deferred.promise();
            },
            updateItem: function(item) {
                var deferred = $.Deferred();
                $.ajax({
                    type: "PUT",
                    url: "script-backend.php",
                    data: item
                }).done(function(d) {
                    deferred.resolve(d);
                    $("#jsGrid").jsGrid("clearInsert");
                    $("#jsGrid").jsGrid("loadData");
                });
                return deferred.promise();
            },
            deleteItem: function(item) {
                var deferred = $.Deferred();
                $.ajax({
                    type: "DELETE",
                    url: "script-backend.php",
                    data: item
                }).done(function(d) {
                    deferred.resolve(d);
                    $("#jsGrid").jsGrid("loadData");
                });
                return deferred.promise();
            },
        },

Firstly, do you consider page loading to be an effective way to manage a large amount of data?

Secondly, Is it possible to include both the code below and the code above?

      controller: {
            loadData: function(filter) {
                var startIndex = (filter.pageIndex - 1) * filter.pageSize;
                return {
                    data: db.clients.slice(startIndex, startIndex + filter.pageSize),
                    itemsCount: db.clients.length
                };
            }
        },

Best Regard

Alexandre