JS implementation of Easyui-datagrid front page

Beef Brisket News Release system has talked about two kinds of pagination: true pagination and false paging

What about the two paging methods? The so-called true paging is to query from the database to show the number of bars, such as 10, the next time I want to show 25, it again access the database, query the first 25. What good is this? Reducing the amount of data transferred increases the speed of the first query. Suitable for queries with large data volumes. What about fake pagination? It returns all the qualifying data in the database to the foreground after a request, and then queries the first 25 to show the first 25 of all data directly. Doing this for the first time degrades performance, but the subsequent display of the page is very fast, and it is in the cache, suitable for queries with small amounts of data.

Today to write the Easyui-datagrid page is also the case, first introduce false paging, and then write the MySQL paging stored procedure to achieve true paging.

First JS write the code about false pagination

Implement false paging function Myloader (param, success, error) {var that = $ (this);    var opts = That.datagrid ("Options");    if (!opts.url) {return false;    } var cache = That.data (). Datagrid.cache; if (!cache) {$.ajax ({type:opts.method, Url:opts.url, Data:param, D                Atatype: "JSON", success:function (data) {That.data (). datagrid[' cache '] = data;            Success (Buliddata (data));            }, Error:function () {error.apply (this, arguments);    }        });    } else {success (Buliddata (cache));        } function Buliddata (data) {var temp = $.extend ({}, data);        var temprows = [];        var start = (param.page-1) * parseint (param.rows);        var end = start + parseint (param.rows);        var rows = data.rows;            for (var i = start; i < end; i++) {if (Rows[i]) {Temprows.push (rows[i]); } else {break;        }} temp.rows = Temprows;    return temp; }}

Second call when loading the DataGrid

$ (' #dg '). DataGrid ({                    loadmsg: ' Trying to load data for you ',                    URL: ' handler.ashx?action=getdata ' + ' &id= ' +id,                    Fitcolumn:false,                    pagenumber:1,                    pagination:true,//pagination control                     rownumbers:true,//Show line numbers                    Pagesize:3,                    PageList: [3, +, +, +],                    loader: <span style= "color: #ff0000;" >myloader</span>,//front page load function                    onloadsuccess:function (data) {                        $ ("#dg"). Data (). Datagrid.cache = null;//clears the DataGrid cache to ensure the foreground false paging;                       //$ (' #dg '). DataGrid (' reload '); show updated data                    }                });

The removal of the cache in the above is necessary, my problem is that the first time the data is loaded after the update parameters if there is data in the background, then the DataGrid will update the content, if the background does not return data, it still shows the original data.

Recently has been from the most basic write Web page to write the client, the biggest feeling is to look at the API, familiar with the flexible use of the page to write a suitable for your business, has been in the packaging of others, after the use of your environment you will not write, so these basic things are still very necessary. But you can't just write down the basics, but look at the model and overall framework of the project, and you have a higher level of ascension.

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

JS implementation of Easyui-datagrid front page