Bootstrap-table: formatNoMatches broken?

[startovernow]

I tried following two ways but no one works, what I am doing wrong?
Thanks!

1. data-formatNoMatches="No Activity"

2. $tbl.bootstrapTable(
   {
   formatNoMatches: function ()
   {
   return 'No Activity';
   }
   });

[jimgit]

Use the formatnomatches

See this http://jsfiddle.net/jimkennelly/2qbs399z/

[startovernow]

@jimgit , like I said, it is not working for me with formatnomatches, not sure why

[jimgit]

Setup your code and post on JSFIDDLE - this really helps isolate the problem. Check the console window in Chrome (F12) look for errors. Check that your html & json is properly formatted.

[wenzhixin]

Maybe you add data-toggle="table": http://jsfiddle.net/2qbs399z/4/
and http://jsfiddle.net/jimkennelly/2qbs399z/

[ai7ch]

I guess this issue is closed... but How to do it with the data-toggle="table" is on ?

[wenzhixin]

When you added data-toggle="table", the table will bootstrap automatically, and then it doesn’t work via JavaScript.

[startovernow]

Thanks @wenzhixin !
data-formatNoMatches="No Activity" works after removing data-toggle="table"
I am still not very clear, when to use data-toggle="table" and when not to use it?
Thanks!

[wenzhixin]

If you are using it via data attributes you can use data-toggle="table", and if you want to using it via JavaScript you need to remove data-toggle="table". Because our code will check whether the table has data-toggle="table" attribute and yes, it will call $('#table').bootstrapTable({}) automatically.

http://bootstrap-table.wenzhixin.net.cn/getting-started/

Via data attributes

Activate bootstrap table without writing JavaScript. Set data-toggle="table" on a normal table.

<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>

Via JavaScript

Call a bootstrap table with id table with JavaScript.

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

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

[startovernow]

Hi @wenzhixin , I always populate my table using JavaScript, like $('#table').bootstrapTable('load', parameter); so I should not use data-toggle="table", correct?
Again, thanks!

[wenzhixin]

$('#table').bootstrapTable('load', parameter); is a method, before using it you need to use data-toggle="table" or $('#table').bootstrapTable();.

[startovernow]

Got it. Thanks @wenzhixin

[ai7ch]

I had different approach to load data, ie, I was using $('#table').bootstrapTable({data: jsonData}) and needed to add data-toggle="table" so that some columns of my data can be sorted.

I will look again the doc, for further reading... Thanks @wenzhixin for all.

[jimgit]

Here's a JSFIDDLE example of what you are should do with data.