[Original] About Easyui the DataGrid Table Control pagination control (non-URL mode)

First look at the effect

In fact, if you use the URL callback to load the data, the front-end almost no need to set anything, just need to open the paging option, and then the back-end server to organize the content of each page to the front.

However, our project is a one-time transfer of data to the front end, using the Data property method instead of the URL callback method to load the information, so it is necessary to process the data in the front-end processing.

varMainjson = arr[0];//JSON string for all data that is transmitted back to the front end$ ("#dg"). DataGrid ({data:getdatabypage (Mainjson,1, 10), Fitcolumns:true, nowrap:false, Striped:true, Singleselect:true, pagination:true,//Open page PaginationPagesize:10,//set display 10 data per pageFittrue, Columns: [[{field:' Departmentname ', title: ' Department name ', Width: ' + ', align: ' center '}, {field:' Readdate ', title: ' Read Date ', Width: ' + ', align: ' center '}, {field:' Value ', title: ' Actual energy ', Width: ' Align ', ' center '}, {field:' BM ', title: ' Standard coal ', Width: "", Align: "center"}, {field:' F_energyitemname ', title: ' Using energy type ', Width: ' Align ', ' center ' }                                 ]]                    }); $("#dg"). DataGrid ("Getpager")). Pagination ({onselectpage:function(pagenumber, pageSize) {$ ("#dg"). DataGrid (' LoadData ', Getdatabypage (Mainjson, PageNumber, pageSize)); }                    });

Because I came back in the background. JSON is pure data without the total and rows properties, so to add these two properties, to process the paging data, use another custom function:

functiongetdatabypage (Mainjson, pagenumber, PageSize) {varNewjsonarray = []; Mainjsonarray= eval ("(" + Mainjson + ")"); if(Mainjsonarray! =NULL&& mainjsonarray.length > ((PageNumber-1) *PageSize)) {                varMax; (Mainjsonarray.length> pagenumber * PageSize)? max = pagenumber * Pagesize:max =mainjsonarray.length;  for(vari = ((PageNumber-1) * PageSize); i < Max; i++) {Newjsonarray.push (mainjsonarray[i]); }            }            Else{Newjsonarray=Mainjsonarray; }            varNewjson = ' {' total ': ' + mainjsonarray.length + ', ' rows ': ' + json.stringify (newjsonarray) + '} ';//The total property corresponds to the number of bars displayed in the page footer .            returnEval ("(" + Newjson + ")"); }

The JSON example passed in the background (to implement paging also needs to add the total and rows properties):

[{"Departmentname": "Infectious Branch", "Readdate": "2015-02-04", "Value": "1016.93", "BM": "124.98", "F_energyitemname": "Power"}, {" Departmentname ": Pediatrics", "readdate": "2015-02-04", "Value": "987.52", "BM": "121.37", "F_energyitemname": "Power"}, {" Departmentname ":" Obstetrics and Gynecology "," Readdate ":" 2015-02-04 "," Value ":" 1501.76 "," BM ":" 184.57 "," F_energyitemname ":" Power "}, {" Departmentname ": Psychiatric department", "Readdate": "2015-02-04", "Value": "168.83", "BM": "20.75", "F_energyitemname": "Power"}, {" Departmentname ":" Anesthesiology section "," Readdate ":" 2015-02-04 "," Value ":" 1360.54 "," BM ":" 167.21 "," F_energyitemname ":" Power "}, {" Departmentname ":" Internal Medicine "," readdate ":" 2015-02-04 "," Value ":" 1400.90 "," BM ":" 172.17 "," F_energyitemname ":" Power "}, {" Departmentname ": Dermatology", "Readdate": "2015-02-04", "Value": "1184.10", "BM": "145.53", "F_energyitemname": "Power"}, {" Departmentname ":" Other Departments "," Readdate ":" 2015-02-04 "," Value ":" 2018.32 "," BM ":" 248.05 "," F_energyitemname ":" Power "}, {" Departmentname ":" Surgery "," readdate ":" 2015-02-04 "," Value ":" 3779.27 "," BM ":" 464.47 "," F_energyitemname ":" Power "}, {" Departmentname ":" ent "," readdate ":" 2015-02-04 "," Value ":" 529.26 "," BM ":" 65.05 "," f_energyitemname ":" Electricity "}, {" Departmentname ":" Medical Imaging section "," Readdate ":" 2015-02-04 ", "Value": "173.13", "BM": "21.28", "F_energyitemname": "Power"}, {"Departmentname": "Oncology", "Readdate": "2015-02-04", "Value": "1849.28", "BM": "227.28", "f_energyitemname": "Electricity"}]

In general, if the data is requested by URL, the front-end code only uses a single sentence to open the paging, but each time the data is loaded to request the backend.

Instead of URL, the backend code can be very simple, one-time transfer all the data to the front-end, let the front-end to handle.

I think the latter approach is more affordable in the case of low data volumes.

[Original] About Easyui the DataGrid Table Control pagination control (non-URL mode)