Bootstrap Table starts from scratch, bootstraptable

Bootstrap Table starts from scratch, bootstraptable

This article will show you step by step how to use the bootstrap Table plug-in on the front end to display a Table

First, download the js required for the bootstrap Table plug-in, address: https://github.com/wenzhixin/bootstrap-table

Official documentation: http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/

Project address: https://pan.baidu.com/s/1sk9w6D3

In this article, you must note that the local bloggers are circled with red pens.

Display first

 

 

 

Next, use the bootstrap Table plug-in to create a Table.

Put the plug-in js downloaded from the above address into the project, namely js, css, and fonts.

Here is a detail: the name of the locale folder cannot be modified, and all the language js in it must be pasted.

This document uses MVC as an example. Of course, WebForm is also supported.

Procedure:

1. Create a new controller and view that references the _ Layout parent page

2. reference the corresponding js in the view

Write a table container on the page.

<table id="ArbetTable"></table>

3. initialize the bootstrap Table

1 $ (function () {2 // 1. initialize Table3 var oTable = new TableInit (); 4 oTable. Init (); 5 });

4. Use bootstrap Table

1 var TableInit = function () {2 var oTableInit = new Object (); 3 // initialize Table 4 oTableInit. init = function () {5 $ ('# arbettable '). bootstrapTable ({6 url: '/Interface/getdata', // request background URL (*) 7 method: 'get', // Request method (*) 8 toolbar: '# toolbar', // container used by the tool button 9 striped: true, // whether to display the row interval color 10 cache: false, // whether to use the cache, the default value is true, therefore, you usually need to set this attribute (*) 11 pagination: true, // whether to display paging (*) 12 sortable: false, // whether to enable sorting 13 sortOrder: "asc", // sorting method 14 queryParams: oTableInit. queryParams, // pass parameter (*) 15 sidePagination: "server", // paging mode: client page, server Page (*) 16 pageNumber: 1, // initialize and load the first page. The default page is 17 pageSize: 10. // The number of record lines per page (*) 18 pageList: [10, 25, 50,100]. // The number of lines per page (*) 19 search: true, // whether to display table search. this search is a client search and will not go to the server. Therefore, personally, it is of little significance 20 contentType: "application/x-www-form-urlencoded", 21 strictSearch: true, 22 showColumns: true, // whether to display all columns 23 showRefresh: true, // whether to display the refresh button 24 minimumCountColumns: 2, // the minimum allowed number of columns 25 clickToSelect: true, // whether to enable clicking the selected row 26 height: 700, // The Row height. If the height attribute is not set, the table automatically determines the table height 27 uniqueId: "no" based on the number of records. // the unique identifier of each row, usually the primary key column 28 showToggle: true, // whether to display the detailed view and List View switch button 29 cardView: false, // whether to display the detailed view 30 detailView: false, // whether the parent and child table 31 columns: [32 {33 field: 'id', 34 title: 'id' 35}, {36 field: 'name', 37 title: 'name '38}, {39 field: 'sex ', 40 title: 'gender '41}, 42 {43 field: 'operate', 44 title: 'operation ', 45 formatter: operateFormatter // custom method, add operation buttons 46}, 47], 48 rowStyle: function (row, index) {49 var classesArr = ['success ', 'info']; 50 var strclass = ""; 51 if (index % 2 = 0) {// even number of rows 52 strclass = classesArr [0]; 53} else {// the odd number of rows 54 strclass = classesArr [1]; 55} 56 return {classes: strclass}; 57}, // The row is discolored 58 }); 59 60}; 61 62 63 // The queried parameter 64 oTableInit is obtained. queryParams = function (params) {65 var temp = {// The Name Of The key here must be the same as the variable name of the controller. Here, the controller must be changed to the same 66 limit: params. limit, // page size 67 offset: params. offset68}; 69 return temp; 70}; 71 return oTableInit; 72}; 73 74 75 function operateFormatter (value, row, index) {// The parameter 76 return [77 '<a class = "btn active disabled" href = "#"> edit </a> ', 78 '<a class = "btn active" href = "#"> archives </a> ', 79 '<a class = "btn-default" href = "#"> record </a> ', 80' <a class = "btn active" href = "#"> access </a> '81]. join (''); 82}

4. data returned from the background url

Public ActionResult GetData (int limit, int offset) {var data = new List <object> () {new {ID = 1, Name = "Arbet ", sex = "male"}, new {ID = 2, Name = "Arbet1", Sex = "female"}, new {ID = 3, Name = "Arbet2 ", sex = "male"}, new {ID = 4, Name = "Arbet3", Sex = "female"}, new {ID = 5, Name = "Arbet4 ", sex = "male"}, new {ID = 6, Name = "Arbet5", Sex = "male"}, new {ID = 7, Name = "Arbet6 ", sex = "female"}, new {ID = 8, Name = "Arbet7", Sex = "male"}, new {ID = 9, Name = "Arbet1 ", sex = "female"}, new {ID = 10, Name = "Arbet2", Sex = "male"}, new {ID = 11, Name = "Arbet3 ", sex = "female"}, new {ID = 12, Name = "Arbet4", Sex = "male"}, new {ID = 13, Name = "Arbet5 ", sex = "male"}, new {ID = 14, Name = "Arbet6", Sex = "female"}, new {ID = 15, Name = "Arbet7 ", sex = "male" }}; var total = data. count; var rows = data. skip (offset ). take (limit ). toList (); return Json (new {total = total, rows = rows}, JsonRequestBehavior. allowGet );}

In this article, the blogger sets data in an anonymous set. You can query the database to obtain data.

Note: The returned parameters must be total and rows. total returns the total number of datasets. rows returns the json format of the table.

 

5. Display Results

This bug is found. What is the problem?

Open source code in a browser

Some other js files are found to be added. This is the js file introduced in the layout parent page.

<!DOCTYPE html>
Comment out the js file in the red box and run it again.


Found successful! This is because the reference of JS library files is ordered. You must first reference the JQuery library file and then reference the plug-in js