JQueryMiniUI development tutorial table control table: Paging query (1)

Data Table reference example: data table paging table 1: Create a table & lt; divid & quot; datagrid1 & quot; class & quot; mini-datagrid & quot; style & quot; width: 700px; height: 280px; & quot; url & quot ;.. /data/DataService. aspx? M

Data Table



Reference example: data table paging table

I. Create a table

Url = "../data/DataService. aspx? Method = SearchEmployees "idField =" id "allowResize =" true"
>


Employee account
Name
Gender
Salary
Age
Creation date



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
{...},
{...},
...
]