First, look at the implementation renderings. If you think it is not bad, please refer to the implementation code.
The above data is paged below
How to use
1 Import bootstrap's css
<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 plugin lTable.js
<script src="js/lTable.js" type="text/javascript"></script>
4 Add html tag and assign values to id
<!-- Table--><div id="d"></div><!-- Pagination--> <div id="u"></div>
5 Get data
Here, get the simulated data of the json file through ajax
initTable(data) is the method of initializing tables and paging
$.ajax({ url:"json/data.json", type:"GET", dataType: "json", success:function(data){ initTable(data); }, error:function(e){ alert("Data acquisition error"); }});6 Initialize the table
Initialize the table first in the initialization method
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>"] //Title corresponding fields, name:["userid","username","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: The fill block selected by the page
data: json data displayed on the page
title: field corresponding to data for each column of the table
name: The first row of the table displays the field
tid: The corresponding key value of each line (can be omitted)
checkBox: value corresponding to the checkbox (can be omitted)
6.3 Check box description
Activate when adding chechBox attribute init
Check box name="ids"
Get the selected column method: $.lTable.getCheckboxIds() Return value example "1,2,3,4"
6.4 Operation instructions
When the attribute name=_opt, the table header automatically changes position "operation"
Corresponding attribute title can add buttons and other operations
Example: "<button onclick='updF(id)'>Modify</button>"
The click method is updF(). The parameter id is the corresponding field of the attribute tid.
7 Initialize the pagination
Then the pagination part
$.lPaging( '#u', // Corresponding id { pageNumber:obj.pageNumber // Current page number, totalPage:obj.totalPage // Total page number, countSize:5 // Number of pages displayed (can be 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: The fill block selected by the page
pageNumber: Current page number
TotalPage: Total page count
countSize: The number of page displays (the default 5 can be omitted)
count:Total number of 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 The whole code
<!DOCTYPE html><html><head><meta charset="utf-"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title></title><link rel="stylesheet" href="css/v/bootstrap.min.css"></head><body><!-- Table--><div id="d"></div><!-- Pagination--> <div id="u"></div></body><script src="js/jquery-...min.js" type="text/javascript"></script><script src="js/lTable.js" type="text/javascript"></script><script>var pageSize=;var myTable;var dataUrl="";//Initialize the page initPage(,pageSize,"");//ajax gets data function initPage(num,ps,url){$.ajax({url:"json/data.json",type:"GET",//type:"POST",//data:"userinfoVO.pageid="+num+"&userinfoVO.pagecount="+ps,dataType: "json", success:function(data){initTable(data);},error:function(e){console.log(e)alert("data acquisition error");}});}//Initialize table and pagination data function initTable(data){//var obj = eval("("+data+")");var obj=data;//tablemyTable=$.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>"] //Title corresponding field, name:["Userid","Username","Password","Permission Name","Status","_opt"],tid:"userid",checkBox:"userid"});//myTable.getCheckboxIds(); //Get the value selected by checkbox//Page$.lPaging('#u', //Component id{pageNumber:obj.pageNumber //Current page number, totalPage:obj.totalPage //Total page number, countSize: //The number of page displays (can be omitted), count:obj.count,inputSearch:true//Show the query input box, onPageChange: function (num) {initPage(num,pageSize,dataUrl);}});}//Modify method function updF(id){alert("Modify: "+id);}//Delete method function delF(id){alert("Delete: "+id);}</script></html>Wulin.com recommends bootstrap related topics:
BootStrap component operation skills
Summary of BootStrap related knowledge
The above is the detailed explanation of the Bootstrap3 form plug-in and paging plug-in examples introduced by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!