CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
Suvojit
Suvojit

Reputation: 379

Bootstrap tables giving errors in console

I am new to bootstrap tables. Was trying out Bootstrap table documentation for a very basic table.

Currently I am referring to http://bootstrap-table.wenzhixin.net.cn/examples/

I tried to include jquery,bootstrap and bootstrap-table script files and also the css as mentioned in the documentation.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<!-- Bootstrap Table CSS -->
<link href="css/bootstrap-table.min.css" rel="stylesheet" >

Script files:

<!--Jquery-->
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<!--Bootstrap-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>\
<!--Bootstrap Tables-->
<script type="text/javascript" src="js/bootstrap-table.min.js"></script>

and included the HTML code: 

<table id="table">
    <thead>
    <tr>
        <th data-field="name">Name</th>
        <th data-field="stargazers_count">Stars</th>
        <th data-field="forks_count">Forks</th>
        <th data-field="description">Description</th>
    </tr>
    </thead>
</table>

with Javascript to load the data.

var data = [
    {
        "name": "bootstrap-table",
        "stargazers_count": "526",
        "forks_count": "122",
        "description": "An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features. (supports twitter bootstrap v2 and v3) "
    },
    {
        "name": "multiple-select",
        "stargazers_count": "288",
        "forks_count": "150",
        "description": "A jQuery plugin to select multiple elements with checkboxes :)"
    },
    {
        "name": "bootstrap-show-password",
        "stargazers_count": "32",
        "forks_count": "11",
        "description": "Show/hide password plugin for twitter bootstrap."
    },
    {
        "name": "blog",
        "stargazers_count": "13",
        "forks_count": "4",
        "description": "my blog"
    },
    {
        "name": "scutech-redmine",
        "stargazers_count": "6",
        "forks_count": "3",
        "description": "Redmine notification tools for chrome extension."
    }
];

$(function () {
    $('#table').bootstrapTable({
        data: data
    });
});

But I am getting the following error on console:

Error on Console Please help me with this. Thanks

Upvotes: 0

Views: 1006

Answers (2)

g_uint
g_uint

Reputation: 2031

Check the contents of bootstrap-table.js . I got the same errors as you and upon checking the contents it was an HTML document. Open up bootstrap-table.js and make sure the contents are js. It should look like this.

https://raw.githubusercontent.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js

After updating the contents it worked like a charm!

Upvotes: 1

Alpesh Prajapati
Alpesh Prajapati

Reputation: 1643

write this

<script type="text/javascript" src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script>

instead of 

<script type="text/javascript" src="js/bootstrap-table.min.js"></script>

JS for Bootstrap-table has been changed.

Upvotes: 1

Related Questions