CODEWITHSUNDEEP
htmlbootstrap-4
Matthew
Matthew

Reputation: 867

Bootstrap table not paginating

While following online tutorials, I implemented the following simple html code with Bootstrap in the hopes I would get pagination, a search bar, among other things:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" 
integrity="sha384- 
Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 
crossorigin="anonymous">
<script 
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 
integrity="sha384- 
JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://unpkg.com/bootstrap- 
[email protected]/dist/bootstrap-table.min.css">
<script src="https://unpkg.com/[email protected]/dist/bootstrap- 
table.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/locale/bootstrap- 
table-zh-CN.min.js"></script>

<title>HTML Tables Demo</title>

</head>
<body>
<div class="container">
    <h4 class="text-center">This is a test</h4>
    <table data-toggle="table" data-search="true" data-pagination="true">
    <thread>
    <tr>
        <th data-field="col1">col1</th>
        <th data-field="col2">col2</th>
        <th data-field="col3">col3</th>
    </tr>
    </thread>

    <tr>
    <td>Russell Westbrook</td>
    <td>OKC</td>
    <td>2558</td>
    </tr>

    <tr>
    <td>Michael Jordan</td>
    <td>Chicago</td>
    <td>3214</td>
    </tr>

    </table>
</div>
<script>
    $(document).ready(function() {
        $('.display').DataTable();
    });
</script>
</body>
</html>

As we can see here, just a simple table with 2 records. Visually: enter image description here

It appears to "sort of" work, as the text font changes (so I know that bootstrap is at least being loaded in) but as we can see in the above screenshot, pagination is not enforced and there is no search bar, despite being implemented.

Plainly, given my lack of experience - why exactly is the search bar & table pagination not taking effect?

Upvotes: 0

Views: 1970

Answers (2)

Zanyar J.Ahmed
Zanyar J.Ahmed

Reputation: 41

Use DataTable js , is best for table with all future , try this

Upvotes: 0

Tobias Reithmeier
Tobias Reithmeier

Reputation: 683

The default length for pagination is 10. Try

data-pagination="true"
data-page-size="1"

...or try with more than two rows. You can find the documentation here.

Upvotes: 1

Related Questions