Bootstrap table Paging plugin using the detailed _javascript tips

Paging (pagination) is an unordered list of Bootstrap that handles pagination like other interface elements.

bootstrap-table Introduction

Bootstrap-table is a lightweight table plugin that uses AJAX to get data in JSON format, which is convenient for paging and data padding and supports internationalization.

Download Address

Https://github.com/wenzhixin/bootstrap-table/archive/1.11.0.zip

How to use

Introduce CSS and JS

<!--CSS styles-->
<link href= "css/bootstrap/bootstrap.min.css" rel= "stylesheet" >
<link href= " Css/bootstrap/bootstrap-table.css "rel=" stylesheet ">
<!--js-->
<script src=" js/bootstrap/ Jquery-1.12.0.min.js "type=" Text/javascript "></script>
<script src=" js/bootstrap/ Bootstrap.min.js "></script>
<script src=" Js/bootstrap/bootstrap-table.js "></script>
<script src= "Js/bootstrap/bootstrap-table-zh-cn.js" ></script>

2. Table Data Fill

Bootstrap-table gets data in two ways, by specifying the data source through the table's Data-url property, and by specifying a URL to get the data through the JavaScript initialization table

<table id= "screentable" data-toggle= "table" > <thead> ... </thead> </table> $ (function () {$ (' #s Creentable '). bootstraptable ({url: "/screen/list", DataField: "Rows", cache:false,//whether to use caching, default to True striped:true,// Whether to display the row interval color pagination:true,//whether to display the paging pagesize:10,///The number of rows per page pagenumber:1,//Initialize load first page, default first page pagelist: [10, 20, 50],//Available The number of rows per page search:true,//whether to display the table search Showrefresh:true,//whether to show the refresh button clicktoselect:true, or whether to enable the Click Selected Row toolbar: "#toolbar_screen"
,///tool button which container sidepagination: "Server",//Page paging: Client client paging, Server service end page queryparamstype: "Limit",///Query Parameters Organization columns: [{ Field: "id", Title: "id", Align: "center", valign: "Middle"}, {field: "Name", Title: "Custom Name", Align: "center", valign: "M Iddle ", Formatter: ' Infoformatter '}, {field:" Time ", title:" Custom Times ", Align:" center ", valign:" Middle "}], Formatnomatche
S:function () {return ' no Qualifying Records ';}});
$ (window). Resize (function () {$ (' #screenTable '). Bootstraptable (' Resetview ');});
}); Function Infoformatter (valUE, row, index) {return ' <a href=/screen/' + row.id + ' target= ' _blank ' > ' + row.name + ' </a> ';} 

The effect chart is as follows

The above is a small set of bootstrap to introduce the table paging plug-in use of detailed, 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!