Based on the Bootstrap3 table plug-in and paging plug-in instance details, bootstrap3 Paging

Based on the Bootstrap3 table plug-in and paging plug-in instance details, bootstrap3 Paging

First, let's take a look at the implementation. If you think it is good, please refer to the implementation code.

Pages under the above data

Usage

1. Import the css of bootstrap.

<link rel="stylesheet" href="css/v3/bootstrap.min.css"> 

2. Import jquery

<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script> 

3. Import table paging plug-in lTable. js

<script src="js/lTable.js" type="text/javascript"></script>

4. Add html tags and assign values to IDS

<! -- Table --> <div id = "d"> </div> <! -- Pagination --> <div id = "u"> </div>

5. Get Data

Here, we use ajax to obtain the analog data of the json file.

InitTable (data) is the method for initializing tables and pagination

$. Ajax ({url: "json/data. json ", type:" GET ", dataType:" json ", success: function (data) {initTable (data) ;}, error: function (e) {alert ("data retrieval error ");}});

6. initialize the table

In the initialization method, first initialize the table

Var obj = data; var myTable = $. lTable ('# d', {data: obj. list // json data, title: ["userid", "username", "password", "userrolename", "status", "<button onclick = 'updf (id) '> modify </button> <button onclick = 'delf (id)'> Delete </button> "] // The field corresponding to the title, name: [" User id ", "User Name", "password", "permission name", "status", "_ opt"], tid: "userid", checkBox: "userid "});

Code Description

6.1 Initialization Method

$. LTable ('id', {data, title, name, tid, chechBox });

6.2 attribute description

Id: Fill block selected on the page
Data: json data displayed on the page
Title: fields corresponding to each column in the table
Name: field displayed in the first row of the table
Tid: key value corresponding to each line (can be omitted)
CheckBox: The value corresponding to the check box (can be omitted)

6.3 check box description

Activated when the chechBox attribute is added during initialization
Check box name = "ids"
Method for obtaining selected columns: $. lTable. getCheckboxIds () Return Value example: "1, 2, 4"

6.4 operation instructions

When the attribute name = _ opt, the table header is automatically changed to "operation"
You can add buttons for the corresponding attribute title.
Example: "<button onclick = 'updf (id) '> modify </button>"
Click the field corresponding to the property tid as the updF () parameter id

7. initialize the page

Then the paging part

$. LPaging ('# U', // corresponding id {pageNumber: obj. pageNumber // current page, totalPage: obj. totalPage // total number of pages, countSize: 5 // Number of pages displayed (omitted), count: obj. count, inputSearch: true // display the query input box, onPageChange: function (num) {initPage (num, pageSize, dataUrl );}});

Code Description

7.1 Initialization Method

$. LPaging ('id', {pageNumber, totalPage, countSize, count, onPageChange (num), inputSearch });

7.2 attribute method description

Id: Fill block selected on the page
PageNumber: Current page number
TotalPage: Total number of pages
CountSize: Number of display pages (default value 5 can be omitted)
Count: total data
OnPageChange (num): returns the click event.
InputSearch: whether to display the query input box boolean default false
GetInputVal (): returns the number in the input box.

8. Entire code

<! DOCTYPE html> 
Bootstrap related topics are recommended for the help house:
BootStrap component Operation Skills
BootStrap knowledge Summary
The above is a detailed description of the table plug-in based on Bootstrap3 and the page plug-in instance. I hope it will help you. If you have any questions, please leave a message, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!