CODEWITHSUNDEEP
javascripthtmljquerycss
ZoZO
ZoZO

Reputation: 35

How can I divide a table into pages without using Bootstrap?

I have a table with about 14000 rows and I want to split the table into 1400 pages(10 rows each) and on changing the page I wanna read some data with AJAX... How is it possible? I don't want to use Bootstrap table datatype or anything...

Any solution? Thanks in advance. :)

Here is my table : 

<?php                                          
    echo '<table id="table" class="table">
        <thead>
            <th>username</th>
            <th>service</th>
            <th>Date_created</th>
            <th></th>
        </thead>';

        foreach($$list as &$res){
            $username = $res['username'];
            $group = $res['service'];
            $cr = $res['creation'];



            echo "
            <tbody>
                <td>$username</td>
                <td>$group</td>
                <td>$cr</td>
                <td><button type='button' rel='tooltip' title='More info' class='btn btn-primary btn-link btn-  sm' onclick='userDetailsModal(`$username`)'><i class='material-icons'>edit</i></button></td>
            </tbody>
            ";
        }


        echo '</table>
    </div>';
?>

Upvotes: 1

Views: 291

Answers (2)

dandavis
dandavis

Reputation: 16726

If someone held a gun to me while coding and wouldn't allow a lib, I would take something like this approach:

<table id=tab1>
  <tbody id=t1 class=active><tr><td>a</td></tr></tbody>
  <tbody id=t2><tr><td>b</td></tr></tbody>
  <tbody id=t3><tr><td>c</td></tr></tbody>
</table>
<style> tbody:not(.active) { display: none;} </style>

I would generate the tbody with an ES6 template string by looping the ajax response array to set tab1.innerHTML. Your bodies will have many rows, and your rows many columns, but the tbody "trick" is key here. You then set a class of active on one tbody to show that page. You will need to figure out a dropdown or breadcrumb or page list widget at the bottom to document.querySelector("#tab1 .active").classList.remove("active"); and set active on the selected page.

Upvotes: 0

Avinash Dalvi
Avinash Dalvi

Reputation: 9301

Use this library build in php

https://phppot.com/php/ajax-pagination-with-php/

or you can use https://datatables.net/ plugin along with ajax in php.

Upvotes: 1

Related Questions