question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

bootstrap-table does not load if using data-formatter and data-editable on same th

See original GitHub issue

First, thanks for the great plugin! I’ll certainly contribute when feasible.

Is it the intended function for data-formatter and data-editable to work independently? Meaning, they cannot be used on the same table header element?

Unfortunately, when both are used, the table does not populate with json data. I’ve put break points in the javascript formatter functions and can confirm they are never executed if both data-* options are used together.

Here’s an example of the html markup, json file and javascript:

[ { “id”: 0, “name”: “Item 0”, “price”: “$0” }, { “id”: 1, “name”: “Item 1”, “price”: “$1” } ]

<table class="table table-striped table-no-bordered table-hover" 
                        data-toggle="table"
                        data-striped="true"
                        data-url="/_bst/data/data2/demo.response.json" data-height="299">
                        <thead>
                            <tr>
                                <th data-field="id">Item ID</th>
                                <th data-field="name" data-formatter="nameFormatter">Item Name</th>
                                <th data-field="price" data-formatter="priceFormatter" data-editable="true">Item Price</th>
                            </tr>
                        </thead>
                    </table>
 <script>
    function nameFormatter(value, row) {
        var icon = row.id % 2 === 0 ? 'glyphicon-star' : 'glyphicon-star-empty'
        return '<i class="glyphicon ' + icon + '"></i> ' + value;
    }

    function priceFormatter(value) {
        var color = '#'+Math.floor(Math.random() * 6777215).toString(16);
        return '<div  style="color: ' + color + '">' +
                '<i class="glyphicon glyphicon-usd"></i>' +
                value.substring(1) +
                '</div>';
    }
</script>

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:11 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
jimgitcommented, Feb 5, 2018

Try using the formatter function. See this JSFiddle

0reactions
dabroscommented, Mar 22, 2018

@RupaliMahadik - that feels like a different issue, so no suprise no reply on closed topic. Please open new issue if still a problem, and be cautious with closed posts, often better to open a new one and include in description/first-post a link to here using #[issue-id] or full url 😃

Read more comments on GitHub >

github_iconTop Results From Across the Web

Bootstrap table data-formatter for hyperlink formating functions ...
Looks like the bootstrap-table script isn't picking up the function declared as a constant const LinkFormatter . So what I did was I ......
Read more >
Editable data display formatter for Bootstrap Table - JSFiddle
The fiddle listings (Public, Private, Titled, etc) will now display latest versions instead of the ones saved as Base versions - this was...
Read more >
Column Options - Bootstrap Table
The column options is defined in jQuery.fn.bootstrapTable.columnDefaults . align. Attribute: data-align. Type: String. Detail: Indicate how to align the ...
Read more >
Bootstrap table server side filtering not working (data-filter ...
I had the same issue and came up with a hackey solution by editing the bootstrap-table-filter js file and renaming it to use...
Read more >
Show php data in data formatter function of bootstrap table
bootstrap-table does not load if using data-formatter and data-editable on same th #2314. <table class="table table-striped table-no-bordered table-hover" ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found