Table implementation in bootstrap summary of data filling and paging application _javascript tips

BootStrap table is a lightweight table plug-in that uses AJAX to get data in JSON format, which is convenient for paging and data padding and supports internationalization. Recently use this plugin in the background to do a table application, make a summary.

1. How to use

Can be taken by the cloud provided by the CDN to obtain JS Plug-ins, style sheets and international plug-ins, or directly to the official website download. Put the following JS plug-in and style into the HTML head to use.

Style
<link href= "http://cdn.bootcss.com/bootstrap-table/1.9.1/bootstrap-table.min.css" rel= "stylesheet"/ > 
<script src= "Http://cdn.bootcss.com/bootstrap-table/1.9.1/bootstrap-table.min.js" ></script >
//Internationalization, form
<script src= "http://cdn.bootcss.com/bootstrap-table/1.9.1/locale/ Bootstrap-table-zh-cn.min.js "></script>

2.table Data padding

BootStrap table There are two ways to get data, one is to specify the data source through the table's Data-url property, but to specify a URL to get the data through the JavaScript initialization table, as shown in the following example.

<table data-toggle= "table" data-url= "Data.json" >
<thead>
... 
</thead>
</table>
$ (' #table '). bootstraptable ({
URL: ' Data.json ' 

The second approach to the first is more flexible when dealing with complex data, typically using the second way to populate table data.

var $table = $ (' #table ');
$table. bootstraptable ({
URL: "Duobaoactivitylist", 
dataType: "JSON",
pagination:true,//Paging
Singleselect:false,
data-locale: "zh-us",//Form Han
search:true,//Display search box
sidepagination: "Server",// Service-side processing paging
columns: [
{
title: ' Activity name ',
field: ' Name ',
align: ' center ',
valign: ' Middle '
}, 
{
title: ' State ',
field: ' Status ',
align: ' center ',
valign: ' Middle ',
}, 
{
title: ' Number of participants ',
field: ' Participationcounts ',
align: ' center '
},
{
title: ' Total number ',
field: ' Totalcounts ',
align: ' center '
},
{
title: ' Start Time ',
field: ' StartTime '
, Align: ' center ',
},
{
title: ' Operations ',
field: ' id ',
align: ' center ',
formatter:function ( Value,row,index) { 
var e = ' <a href= ' # "mce_href=" # "onclick=" edit (\ ' + row.id + ') "> Edit </a>; 
var d = ' <a href= ' # "mce_href=" # "onclick=" del (\ "+ row.id + ' \") "> Delete </a>"; 
Return E+d 
}}
]
};

The field field must correspond to the fields returned by the server side to show the data.

3. Paging and searching

When paging, bootstrap table passes two paging fields to the back end: limit, offset, which represents the number of pages per page and defaults to 10, which represents the offset of the data when paging.

While searching, the search field is passed to the back end, which indicates the specific search content.

The server-side returned data also includes page (page), total (amount of data) two fields, the front end to be based on these two fields paging.

The final display effect is shown in the following illustration:

The above is a small set to introduce the table in the bootstrap to achieve data filling and paging application summary, 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!