/

<table data-toggle="table"
    >
    <thead>
        <tr>
            <th data-field="fruit" data-sortable="true">Item</th>
            <th data-field="date"  data-sortable="true">Date</th>
            <th data-field="type"  data-sortable="true">Type</th>
        </tr>
    </thead>
    <tbody>
        <tr><td>Pear  </td><td data-month="1">January</td> <td>Fruit</td></tr>
        <tr><td>Carrot</td><td data-month="3">March</td>   <td>Vegetable</td></tr>
        <tr><td>Apple </td><td data-month="2">February</td><td>Fruit</td></tr>
    </tbody>
</table>

In this fiddle is an example of a table. When you click the header, the table is sorted by the column belonging to that header.

My question is, if it's possible to trigger that function in some other way - from some other function. More generally: can I explicitly call the functions which are called as callbacks from various bootstrap widgets?

http://jsfiddle/e3nk137y/4537/

<table data-toggle="table"
    >
    <thead>
        <tr>
            <th data-field="fruit" data-sortable="true">Item</th>
            <th data-field="date"  data-sortable="true">Date</th>
            <th data-field="type"  data-sortable="true">Type</th>
        </tr>
    </thead>
    <tbody>
        <tr><td>Pear  </td><td data-month="1">January</td> <td>Fruit</td></tr>
        <tr><td>Carrot</td><td data-month="3">March</td>   <td>Vegetable</td></tr>
        <tr><td>Apple </td><td data-month="2">February</td><td>Fruit</td></tr>
    </tbody>
</table>

In this fiddle is an example of a table. When you click the header, the table is sorted by the column belonging to that header.

My question is, if it's possible to trigger that function in some other way - from some other function. More generally: can I explicitly call the functions which are called as callbacks from various bootstrap widgets?

• javascript
• jquery
• twitter-bootstrap

4 Answers 4

You could programatically click the header. Does this achieve what you want?

$("th[data-field='fruit'] .sortable").click();

Fiddle

Firing a click on the TH as @Jaydo suggested is a good option (I was about to suggest that myself). You won't be able to control the direction (e.g. ascending or descending) you want to sort though.

Have a look at this jsFiddle. It's more like a hack, not a solution.

Setting up some additional data on the TH will help to control the sorting direction.

var table = $('#bsTable'),
    targetTH = table.find('th[data-field="' + field + '"]'),
    targetTHInner = targetTH.children('.sortable');
    
if (table.bootstrapTable('getOptions').sortName === field && targetTH.data('order') === order) {
    console.log('Already sorted');
    return;
}
// ironically, we need to set the data value to the oposite direction to what we want
if (order === 'asc') {
    targetTH.data('order', 'desc');
} else {
    targetTH.data('order', 'asc');
}

targetTHInner.click();

On version 1.14, I was able to achieve this by using the "refreshOptions" method and passing the sortName and sortOrder option.

$('table').bootstrapTable('refreshOptions', {
    sortName:"fruit",
    sortOrder:"desc"
});

You could also add data-sort-name="fruit" to your table element to specify a default sort column.

Add data-sort-order="desc" to change the sort order.

jsfiddle