【JS】bootstrap table 欄位橫向擴充

昨天在處理一個case，碰到了些有趣的問題

我需要設計一個表單，讓使用者可以自行擴充橫向欄位
擴充欄位的部分已經設計好了，有問題的是顯示方式



實用上我使用bootstrap table，他的欄位可以使用JS作可動設定

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

$('#table').bootstrapTable({
    columns: [{
        field: 'id',
        title: 'Item ID'
    }, {
        field: 'name',
        title: 'Item Name'
    }, {
        field: 'price',
        title: 'Item Price'
    }]
});

我把他弄成這樣

columns =  [{
        field: 'id',
        title: 'Item ID'
    }, {
        field: 'name',
        title: 'Item Name'
    }, {
        field: 'price',
        title: 'Item Price'
    }]

for(i = 0 ; i<5; i++)
{
    columns.push( {
        field: 'title'+(i+1),
        title: 'title'+(i+1)
    },)

}

$('#table').bootstrapTable({
    columns: columns

});

可是這樣就衍生了另一個問題

如果說我需要用一些特定功能像是data-filter-control
在JS端我就不知道何從新增

我本來想過在開始bootstrapTable之前把thead先加上去
可是這樣的話bootstrapTable的function在實作的時候好像會把thead的部分覆蓋掉

我再跟我朋友討論這個問題的時候，他提出了不算辦法的辦法

"可以用PHP把table秀出來"

對阿！我在做的時候怎麼沒有想到呢！？
網路上查詢的範例大部分都是直接在HTML那邊就把thead實作的範例

<table data-toggle="table">
    <thead>
        <tr>
            <th>Item ID</th>
            <th>Item Name</th>
            <th>Item Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Item 1</td>
            <td>$1</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Item 2</td>
            <td>$2</td>
        </tr>
    </tbody>
</table>

這讓我在查詢JS新增的方式的時候造成了一定的困難度

如果用PHP新增的話就可以模仿成跟範例一樣啦
昨天大概是做到累了，沒有想到吧Orz