Use jquery. pagination. js for paging

Use jquerypaginationjs to process Html code by PAGE: place the previous code at the bottom of the page. Js Code: Code flow: First Use

Use jquery. pagination. js for paging

Html code:

Place the code above at the bottom of the page.

Js Code:

Code process:

First, use this js to perform two backend accesses.

The first time is to find the number of pages, that is, the number of pages.

The second query is the data on the current page.

// Number of information entries per page

Var items_per_page = 10;

// Page number

Var pageIndex = 0;

// The total number of data entries. In this example, the number of data entries is obtained before entering the page (in action or mvc.

Var recordtotal =$ {allNum };

$ (Document). ready (function (){

// Determine whether the number of returned data entries is 0. If it is zero, the system prompts "no data".

If (recordtotal = 0 ){

// Code without data

} Else {

// Pagination-only initialize once

$ ("# Pagination"). pagination (recordtotal ,{

Callback: PageCallback,

Items_per_page: items_per_page, // number of entries displayed on each page

Num_display_entries: 10, // The default value is 10.

Num_edge_entries: 1, // number of entries displayed on both sides of the page

Prev_text: "Previous Page ",

Next_text: "Next page ",

Current_page: pageIndex // index of the current page

});

// Pagination-only initialize once

}

});

// Functions called by page turning

FunctionPageCallback (index, jq ){

InitTable (index );

Returnfalse;

}

// Request paging data

FunctionInitTable (pageIndex ){

Varareaname = $ ("# areaname"). val ();

$ ("# Recordlist"). mask ("loading data ...");

$. Ajax ({

Type: "POST ",

Url: "powerAll. mvc ",

Cache: false,

Data: {"pageNum": pageIndex, "pageSize": items_per_page}, // The data to be uploaded to the background includes the current page (the page to be displayed starts from 0) and several entries per page

DataType: 'json ',

ContentType: "application/x-www-form-urlencoded ",

Success: function (data ){

// Clear data in the display Layer

Varrecordlist = $ ("# recordlist> tbody: first ");

Recordlist. empty ();

$. Each (data, function (I, value) {// return json data from the background for analysis

IpReplace = value. ip;

IpReplace = ipReplace. split ("."). join ("_");

Varrecordlistcontent =""+

""+ Value. powerType +""+

""+ Value. ip +""+

""+ Value. powerInputPortNumber +""+

""+ Value. powerOutputPortNumber +""+

""+ Value. temperature +"";

Recordlistcontent + =" Edit";

Recordlist. append (recordlistcontent );

$ ("# Recordlist"). unmask ("loading data ...");

// SetInterval (getTempByIp (value. ip), 10000 );

Ips + = value. ip + ",";

// Alert ($ ("tabletd"). size ());

// Window. location. reload ();

});

GetTempByIp ();

} // End of success Function

}); // Ajax request ended

}

The above is the front-end code.

There are two main methods in the background:

The first one gets the number of data entries: the SQL statement can be used: select count (*) from user where... In this way, the total number of items can be obtained;

The second is to obtain the json data of the data on the current page:

Here we will not talk about what the json data is like. Taking mysql as an example, you can use the SQL statement: select * from userwhere... Limit Current page * number of entries per page (current page + 1) * number of entries per page. After obtaining the list, you can use json4j to convert json data or manually convert the data.

In this way, paging can be completed.