Trivial 'Bootstrap Table' (pasted from docs) not sortable

Question

See rendered page at http://pub.admc.com/tmp/trivial.html. You can see that I'm getting jQuery, Bootstrap, and Bootstrap from CDN, each as instructed in the corresponding product documentation.

It seems that all 3 products are loading successfully. If I change to load table data from JSON, then the JSON populates the table skeleton successfully, but it's still not sortable. Chrome JavaScript console runs 100% clean.

According to the doc reference table (only kind of docs there are for Bootstrap Table :( ), bootstrap-tablified tables should be sortable by default. Nevertheless I added attribute data-sortable=true but that has no effect.

<!DOCTYPE html>
<html lang="en">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Table samples</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.0/bootstrap-table.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.0/bootstrap-table.min.js"></script>
<body>
<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>
</body>
</html>

Blaine · Accepted Answer · 2016-07-27 04:11:07Z

0

I figured out that though the table element defaults to data-sortable=true, nothing can be sorted by default since all columns default to sortable=false.

With everything else in default state, you enable sorting column-by-column by adding attr data-sortable=true to th elements.

answered Jul 27, 2016 at 4:11

Blaine

1,5962 gold badges17 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Trivial 'Bootstrap Table' (pasted from docs) not sortable

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related