_javascript techniques based on BOOTSTRAP3 table plug-in and pagination plugin examples

First look at the implementation of the picture, if it is good, please refer to the implementation code.

The above data is paginated below

How to use

1 Import Bootstrap CSS

2 Importing jquery

3 Import Table Paging plugin Ltable.js

<script src= "Js/ltable.js" type= "Text/javascript" ></script>

4 Add HTML tags and assign values to IDs

<!--form-->
<div id= "D" ></div>
<!--pagination--> 

5 Getting the data

This gets the analog data for the JSON file via Ajax

Inittable (data) for initialization tables and paging methods

$.ajax ({
URL: "Json/data.json",
type: "Get",
DataType: "JSON", 
success:function (data) {
Initt　　Able (data);
},
Error:function (e) {
alert ("Data fetch error");
}

6 Initialization table

Initialize the table first in the initialization method

var obj=data;
var mytable=$.ltable (
' #d ',
{
data:obj.list//json data
, title:["userid", "Usern Ame "," Password "," Userrolename "," status "," <button onclick= ' UpdF "(ID) ' > Modify </button> <button onclick= ' Delf (ID) ' > Delete </button> ']//title corresponding field 
, 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 Property Description

ID: Fill block for page selection
Data: page display of JSON
Title: Table Each column corresponds to the data field
Name: The first row of the table shows the fields
TID: The corresponding key value per line (can be omitted)
CheckBox: Value for check box (can be omitted)

6.3 check box description

Activated when the Add Chechbox property is initialized
check box name= "IDs"
Get the selected Column method: $.ltable.getcheckboxids () return value example "1,2,3,4"

6.4 Operation Description

Table header Name=_opt "action" when property is being changed
Corresponding property title can add buttons and other actions
Example: "<button onclick= ' UpdF (ID) ' > Modify </button>"
Click the method for the UPDF () parameter ID as the attribute tid the corresponding field

7 Initializing paging

Then the paging section

$.lpaging (
' #u ',///corresponding ID
{
pageNumber:obj.pageNumber//Current page, TotalPage:obj.totalPage//
Total page Number
, Countsize:5//Paging display number (can be omitted)
, Count:obj.count
, inputsearch:true//display query input box
, ONPAGEC　　　　　　Hange: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 for page selection
PageNumber: Current Pages
Totalpage: Total Pages
Countsize: Number of paging display (default 5 can be omitted)
Count: Total Data
Onpagechange (num): Back to click events
Inputsearch: Show Query Input Box Boolean default False
Getinputval (): Returns the number in the input box

8 The whole piece of code

<! DOCTYPE html>  

Recommended bootstrap related topics in cloud-dwelling communities:

Bootstrap component Operation tips

Bootstrap Related Knowledge Summary

The above is a small set for you to introduce the Bootstrap3 form Plug-ins and pagination plug-in examples of the relevant knowledge, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!