Easyui-datagrid build-[Component loading and sequencing]

Effect:

Principle: pass through post to the data background field.

• The parameters that are uploaded at this time, page: Current page, rows: The number of pages displayed per page.
• There are two parameters that calculate the number of fetched data bars.
• Takes parameters through the background, processes them, and returns the extracted data.

HTML code:

            <table id="tab"></table>

JS Code:

• The name of the column that appears, corresponding to the column name in the JSON data.

$ (function () {$ ('#tab'). DataGrid ({width: -,//widthTitle'List of information',//Title nameICONCLS:'Icon-search',//iconsSingleselect:true,//whether to radioStriped:true,//whether to open zebra crossing//the data to be loadedUrl:".. /json/datagridjson.ashx",        //the columns to displaycolumns: [[{field:'ID', Title:'numbering'}, {field:'name', Title:'name'}, {field:'Sex', Title:'Sex'}        ]],        //show pagination control barPagination:true, PageNumber:1,//on the first page when initializingPageSize:5,//, the number of bars displayed per pagePageList: [5,Ten, the],//number of bars to display per page    });})

The General Processing program (ASHX) records the data page:

• Used below, the DataTable transforms the JSON class.
• A paged SQL statement is used.
• To be able to display the total number of bars in the DataGrid component, add the totals attribute to the returned data, as detailed in the comments in the code.

usingEasyui.dal;usingEasyui.tools;usingSystem;usingSystem.Data;usingsystem.web;namespaceeasyui.json{/// <summary>    ///Summary description of Datagridjson/// </summary>     Public classDatagridjson:ihttphandler { Public voidProcessRequest (HttpContext context) {context. Response.ContentType="Application/json"; //the number of pages to receive from the foreground and how many bars to display per page//the parameters that are passed after the front-page paging is opened            intPageIndex = Convert.ToInt32 (context. request["page"]); intPageNumber = Convert.ToInt32 (context. request["rows"]); //Storing DataDataTable dt =NewDataTable (); if(PageIndex = =1)            {                //Load First page                stringPageindexone ="Select Top"+ PageNumber +"ID, name, sex from Tb_person"; //Get DataDT =sqlhelper.executetable (Pageindexone, CommandType.Text); }            Else if(PageIndex! =1)            {                //load non-first page                stringPageindexnotone =@"Select ID, name, sex from (select Row_number () over (order by ID) as rownum, ID , name, sex from Tb_person) as a where A.rownum >"+ (PageIndex-1) * PageNumber +"and A.rownum <="+ PageIndex * pagenumber +""; //Get DataDT =sqlhelper.executetable (Pageindexnotone, CommandType.Text); }            Else { }            //convert a DataTable to JSON//in the returned JSON data, add the total attribute (number of records)//then he will show the total number of records at the time of loading. //The format shown is "{" Total ":" Rows ":" [{},{},{}] "}", and the JSON data is in rows.             stringStrjson ="{\ "total\": "Rows\" :"+ datatabletojson.tojson (DT) +"}"; Context.        Response.Write (Strjson); }                 Public BOOLisreusable {Get            {                return false; }        }    }}

Easyui-datagrid Build-[Component load and sort]