JQuery MiniUI development tutorial table control table: Paging query (1)

Data Table



Reference example: data table paging table

I. Create a table

<Div id = "datagrid1" class = "mini-datagrid" style = "width: 700px; height: 280px ;"
Url = "../data/DataService. aspx? Method = SearchEmployees "idField =" id "allowResize =" true"
>
<Div property = "columns">
<Div type = "indexcolumn"> </div>
<Div field = "loginname" width = "120" headerAlign = "center" allowSort = "true"> employee account </div>
<Div field = "name" width = "120" headerAlign = "center" allowSort = "true"> name </div>
<Div field = "gender" width = "100" renderer = "onGenderRenderer" align = "center" headerAlign = "center"> gender </div>
<Div field = "salary" width = "100" allowSort = "true"> salary </div>
<Div field = "age" width = "100" allowSort = "true"> age </div>
<Div field = "createtime" width = "100" headerAlign = "center" dateFormat = "yyyy-MM-dd" allowSort = "true"> creation date </div>
</Div>
</Div>

Ii. Data Loading

Conditional loading:
// Obtain the query conditions from the interface form elements
Grid. load ({
Name: document. getElementById ("key"). value,
Date: document. getElementById ("date"). value
});
Paging Navigation:
Grid. gotoPage (1, 10); // jump to the second page, 20 data entries per page
Field sorting:

// Sort the "createtime" field by degradation
Grid. sortBy ("createtime", "desc ");

Iii. server processing

// Query Conditions
String key = Request ["name"];
// Pagination
Int pageIndex = Convert. ToInt32 (Request ["pageIndex"]);
Int pageSize = Convert. ToInt32 (Request ["pageSize"]);
// Sort Fields
String sortField = Request ["sortField"];
String sortOrder = Request ["sortOrder"];

// Database operation: query using parameters such as query conditions, paging, and sorting
Hashtable result = SearchEmployees (key, pageIndex, pageSize, sortField, sortOrder );

// Return JSON: serialize the query result to a JSON string
String json = PluSoft. Utils. JSON. Encode (result );
Response. Write (json );

Iv. Data Structure

After processing on the server, the JSON structure obtained is as follows:

{
Total: 100, // total number of records
Data: [// array data after Paging
{...},
{...},
...
]