Tutorial of bootstrapptable

Official website:
http://bootstrap-table.wenzhixin.net.cn/
Reference documents: http://issues.wenzhixin.net.cn/bootstrap-table/index.html
Chinese document: http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
js required for downloading bootstrap Table plug-in, address: https://github.com/wenzhixin/bootstrap-table

During the development of the project, we found a series of JS components -- table component artifact
The official documents are relatively simple and summarize some common problems

1: Implement a simple table and paging

Picture.png
<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <title>Dashboard | Nadhif - Responsive Admin Template</title>
        <link rel="stylesheet" href="../../../css/bootstrap.min.css">
        <link rel="stylesheet" href="../../../public/css/plugins/bootstrap-table/bootstrap-table.min.css">
        <script src="../../../js/jquery.min.js"></script>
        <script src="../../../js/bootstrap.min.js"></script>
        <script src="../../../public/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
        <script src="../../../public/js/plugins/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
    </head>

    <body>
        <table id="mytab" class="table table-hover"></table>
        <script>
            $('#mytab').bootstrapTable({
                url: 'data1.json',
                queryParams: "queryParams",
                toolbar: "#toolbar",
                sidePagination: "true",
                striped: true, // Display color separation between lines
                //search : "true",
                uniqueId: "ID",
                pageSize: "5",
                pagination: true, // Pagination or not
                sortable: true, // Enable sorting or not
                columns: [{
                        field: 'id',
                        title: 'Login name'
                    },
                    {
                        field: 'name',
                        title: 'Nickname?'
                    },
                    {
                        field: 'price',
                        title: 'role'
                    },
                    {
                        field: 'price',
                        title: 'operation',
                        width: 120,
                        align: 'center',
                        valign: 'middle',
                        formatter: actionFormatter,
                    },

                ]
            });
            //Formatting the action bar
            function actionFormatter(value, row, index) {
                var id = value;
                var result = "";
                result += "<a href='javascript:;' class='btn btn-xs green' onclick=\"EditViewById('" + id + "', view='view')\" title='See'><span class='glyphicon glyphicon-search'></span></a>";
                result += "<a href='javascript:;' class='btn btn-xs blue' onclick=\"EditViewById('" + id + "')\" title='edit'><span class='glyphicon glyphicon-pencil'></span></a>";
                result += "<a href='javascript:;' class='btn btn-xs red' onclick=\"DeleteByIds('" + id + "')\" title='delete'><span class='glyphicon glyphicon-remove'></span></a>";
                return result;
            }
        </script>
    </body>

</html>

json data:

    [  
        {  
            "id": 0,  
            "name": "Item 0",  
            "price": "$0"  
        },  
        {  
            "id": 1,  
            "name": "Item 1",  
            "price": "$1"  
        },  
        {  
            "id": 2,  
            "name": "Item 2",  
            "price": "$2"  
        },  
        {  
            "id": 3,  
            "name": "Item 3",  
            "price": "$3"  
        },  
        {  
            "id": 4,  
            "name": "Item 4",  
            "price": "$4"  
        },  
        {  
            "id": 5,  
            "name": "Item 5",  
            "price": "$5"  
        },  
        {  
            "id": 6,  
            "name": "Item 6",  
            "price": "$6"  
        },  
        {  
            "id": 7,  
            "name": "Item 7",  
            "price": "$7"  
        },  
        {  
            "id": 8,  
            "name": "Item 8",  
            "price": "$8"  
        },  
        {  
            "id": 9,  
            "name": "Item 9",  
            "price": "$9"  
        },  
        {  
            "id": 10,  
            "name": "Item 10",  
            "price": "$10"  
        },  
        {  
            "id": 11,  
            "name": "Item 11",  
            "price": "$11"  
        },  
        {  
            "id": 12,  
            "name": "Item 12",  
            "price": "$12"  
        },  
        {  
            "id": 13,  
            "name": "Item 13",  
            "price": "$13"  
        },  
        {  
            "id": 14,  
            "name": "Item 14",  
            "price": "$14"  
        },  
        {  
            "id": 15,  
            "name": "Item 15",  
            "price": "$15"  
        },  
        {  
            "id": 16,  
            "name": "Item 16",  
            "price": "$16"  
        },  
        {  
            "id": 17,  
            "name": "Item 17",  
            "price": "$17"  
        },  
        {  
            "id": 18,  
            "name": "Item 18",  
            "price": "$18"  
        },  
        {  
            "id": 19,  
            "name": "Item 19",  
            "price": "$19"  
        },  
        {  
            "id": 20,  
            "name": "Item 20",  
            "price": "$20"  
        }  
    ]  

2: On the property list of bootstrap table


            url: '/Home/GetDepartment',         //Request background URL (*)
            method: 'get',                      //Request method (*)
            toolbar: '#Which container does the tool button use
            striped: true,                      //Display color separation between lines
            cache: false,                       //Whether to use cache is true by default, so you need to set this property (*)
            pagination: true,                   //Display paging (*)
            sortable: false,                     //Enable sorting or not
            sortOrder: "asc",                   //sort order
            queryParams: oTableInit.queryParams,//Pass parameter (*)
            sidePagination: "server",           //Paging mode: client paging, server paging (*)
            pageNumber:1,                       //Initialize load first page, default first page
            pageSize: 10,                       //Record lines per page (*)
            pageList: [10, 25, 50, 100],        //Number of rows per page to choose from (*)
            search: true,                       //Whether to display table search? This search is a client search and will not enter the server. Therefore, it is not meaningful for me
            strictSearch: true,
            showColumns: true,                  //Show all columns or not
            showRefresh: true,                  //Show refresh button or not
            minimumCountColumns: 2,             //Minimum number of columns allowed
            clickToSelect: true,                //Enable Click to select row
            height: 500,                        //Row height. If the height attribute is not set, the table automatically feels the table height according to the number of records
            uniqueId: "ID",                     //Unique identification of each row, generally the main key column
            showToggle:true,                    //Show toggle buttons for detail view and list view
            cardView: false,                    //Show detailed view or not
            detailView: false,                   //Show parent-child table or not
            columns: [{
}]

3: How to set the color change of the first row in bootstrap table, and other rows do not

In fact, it's very simple to find the code corresponding to the first line in the code, and then add the attribute


Picture.png
#mytab  thead{background: #5488c4;}

4: Automatically refresh and load the table after adding and deleting data

$table.bootstrapTable('refresh');

Tags: Javascript JSON Attribute github

Posted on Mon, 04 May 2020 05:48:04 -0400 by kamy99