Как вставить и обновить данные в таблицу Bootstrap?

Я не нашел точного ответа, как вставлять и обновлять данные в таблице bootstrap.

данные поступают из URL-адреса в формате JSON.

Я должен использовать несколько URL-адресов в одной таблице.

7
javascript twitter-bootstrap-3

2 ответов

<html>
    <head>
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.1/bootstrap-table.css">

        <!-- Latest compiled and minified JavaScript -->
        <script src="js/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.1/bootstrap-table.js"></script>
    </head>

    <body>
        <div style="margin : 100px;">
            <button class="btn-primary btn" onclick="load();" >Load Table</button>
            <button class="btn-primary btn" onclick="reload();">Update Table</button>
        </div>
        <table class="table" id="table">
            <thead>
                <tr>
                    <th data-field="id">Item ID</th>
                    <th data-field="name">Item Name</th>
                    <th data-field="price">Item Price</th>
                </tr>
            </thead>
        </table>
        <script>
            $('#table').bootstrapTable({});
            function load(){
                var data = [{
                        id: 1,
                        name: 'Item 1',
                        price: ''
                    }, {
                        id: 2,
                        name: 'Item 2',
                        price: ''
                    }]; 
                $('#table').bootstrapTable("load", data);
            }
            function reload(){
                var data = [{
                        id: 3,
                        name: 'Item 3',
                        price: ''
                    }, {
                        id: 4,
                        name: 'Item 4',
                        price: ''
                    }]; 
                    $('#table').bootstrapTable("load", data);
            }
        </script>
    </body>
</html>

Если данные поступают из API как JSON, вам нужно сначала загрузить JSON из конечной точки API и сохранить его в переменной javascript и загрузить

демо на JSFiddle

5

скажем, данные json хранятся в массиве javascript под названием myList в индексе 0, и вы вставляете в myTable, используйте опцию "insertRow" для таблицы начальной загрузки, чтобы вставить в качестве последней строки в конце таблицы, как показано ниже:

var rowId = $("#myTable >tbody >tr").length;
$(myTable).bootstrapTable('insertRow',{
            index: rowId,
            row: myList[0]
         });
0