Use of Bootstrap table plugin

Use bootstrap's table plugin:

1. First we have to introduce js:

    

<link rel="stylesheet" href="bootstrap.min.css">

   <script src="jquery.min.js"></script>

   <script src="bootstrap.min.js"></script>

   <link rel="stylesheet" href="bootstrap-table.css">

   <script src="bootstrap-table.js"></script>

   <script src="bootstrap-table-zh-CN.js"></script>

 

2. Declare a table object in html

   

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

 

 

3. For the detailed configuration of a table, let’s start with the renderings

In the above figure, we use JS to initialize the table content. The JS code is as follows

var $ table;
        //Initialize the contents of bootstrap-table
        function InitMainTable () {
            //Record the page bootstrap-table global variable $table for easy application
            var queryUrl = '/TestUser/FindWithPager?rnd=' + Math.random()
            $table = $('#grid').bootstrapTable({
                url: queryUrl, //Request background URL (*)
                method: 'GET', //Request method (*)
                //toolbar: '#toolbar', //Which container is used for the tool button
                striped: true, //whether to display line interval color
                cache: false, //whether to use the cache, the default is true, so in general, you need to set this property (*)
                pagination: true, //whether to display pagination (*)
                sortable: true, //whether to enable sorting
                sortOrder: "asc", //sort method
                sidePagination: "server", //Pagination method: client paging, server server paging (*)
                pageNumber: 1, //initially load the first page, the default first page, and record
                pageSize: rows, //Number of record rows per page (*)
                pageList: [10, 25, 50, 100], //Number of rows per page that can be selected (*)
                search: false, //whether to display table search
                strictSearch: true,
                showColumns: true, //whether to display all columns (select the displayed columns)
                showRefresh: true, //whether to show the refresh button
                minimumCountColumns: 2, //minimum allowed number of columns
                clickToSelect: true, //Whether to enable click to select rows
                //height: 500, //Row height, if the height attribute is not set, the table will automatically feel the table height according to the number of records
                uniqueId: "ID", //The unique identifier of each row, generally the primary key column
                showToggle: true, //whether to show the toggle buttons of the detail view and list view
                cardView: false, //whether to display the detail view
                detailView: false, //whether to display the parent and child table
                // get the query parameters
                queryParams : function (params) {
                    //The name of the key here and the variable name of the controller must be the same. If this is changed, the controller also needs to be changed to the same
                    var temp = {   
                        rows: params.limit, //page size
                        page: (params.offset / params.limit) + 1,   //页码
                        sort: params.sort, //sort column name  
                        sortOrder: params.order //Ranking order (desc, asc)
                    };
                    return temp;
                },
                columns: [{
                    checkbox: true,  
                    visible: true //whether to display the checkbox  
                }, {
                    field: 'Name',
                    title: 'name',
                    sortable: true
                }, {
                    field: 'Mobile',
                    title: 'Mobile',
                    sortable: true
                }, {
                    field: 'Email',
                    title: 'Mailbox',
                    sortable: true,
                    formatter: emailFormatter
                }, {
                    field: 'Homepage',
                    title: 'Homepage',
                    formatter: linkFormatter
                }, {
                    field: 'Hobby',
                    title: 'Hobbies'
                }, {
                    field: 'Gender',
                    title: 'gender',
                    sortable: true
                }, {
                    field: 'Age',
                    title: 'age'
                }, {
                    field: 'BirthDate',
                    title: 'Date of Birth',
                    formatter: dateFormatter
                }, {
                    field: 'Height',
                    title: 'height'
                }, {
                    field: 'Note',
                    title: 'Notes'
                }, {
                    field:'ID',
                    title: 'Operation',
                    width: 120,
                    align: 'center',
                    valign: 'middle',
                    formatter: actionFormatter
                }, ],
                onLoadSuccess: function () {
                },
                onLoadError: function () {
                    showTips("Data loading failed!");
                },
                onDblClickRow: function (row, $element) {
                    var id = row.ID;
                    EditViewById(id, 'view');
                },
            });
        };

　　

it ends here

Details can be found here https://www.cnblogs.com/wuhuacong/p/7284420.html