Continue counting serial number affer page on pagination

Question

I am displaying data results from database with php, ajax and jquery. I have used codeigniter 4 pager library for pagination. But when I click the next page of pagination the serial number reset and start again from 1-10, all I want is when i click the next page to continue counting a serial number from 11-20, 21-30 etc... Help please. Thank you.

//html table

   <table>
          <thead>
                 <tr>
                     <th>No.</th>
                     <th>MyColumn</th>
                 </tr>
          </thead>
          <tbody class="result"></tbody>
   </table>

//jquery show();

  function show(){
        let ajax = $.ajax({
             url     : '/Controller/getAll',
             method  : 'post',
             dataType: 'json',
             cache   : false
      });
      ajax.done(function(data){
          let serialNumber = 1;

          $.each(data.result, function(k, v){
                html += `<tr>
                             <td>${serialNumber}</td>
                             <td>${v.myColums}</td>
                         </tr>`;
                serialNumber++;
          });
      });

      $('.result').html(html);
  }

// php controller

    public function getAll()
    {
        $result = $this->model->getData()->asObject()->paginate('10');
        $pager = $this->model->pager;
        
        foreach($result as $row){
            $output[] = [
                 'id'          =>  $row->id,
                 'myColumn'    =>  $row->myColumn,
            ];
        }

        $jsonArray = [
            'result'  => $output, 
            'pager'   => $pager->links(),
        ];
        return $this->response->setJSON($jsonArray);
    }

Every time you clicked the next page button, an ajax request is sent and therefore in ajax.done method your **serialNumber** variable starts from 1 again. But if you declare the **serialNumber** variable outside of the function scope your variable should increment in every step instead of reset itself from 1 again. — Engincan Veske, Mar 16 '21 at 06:11
Why do you have a js defined "serialNumber"? What does it *mean*? What use is it? What's it used for? Looks like it should be something stored in the db, eg `${v.id}` — freedomn-m, Mar 16 '21 at 06:20
No, i didn't display id from db all I want is serial number. ${v.id} will be added and other columns according to my need. Thank you very much! — ven, Mar 16 '21 at 06:23
Why would only answer the wrong half of the question? ok, so you don't want v.id - but still: *Why do you have a js defined "serialNumber"?* What does it mean? What use is it? What's it used for? — freedomn-m, Mar 16 '21 at 06:25
SerialNumber and ${v.id} are different since ${v.id} represent data id of primary key from database but I didn't what it to be displayed on the page. If I want it, the table ID column will be added later. — ven, Mar 16 '21 at 06:35
But what *is* SerialNumber meant to be? It doesn't have any relation to your data and just seems a sequential/random number. Do you mean it to be the row *index*? — freedomn-m, Mar 16 '21 at 08:13
Yes exactly what I wanted, but I have a problem when click on next and previous pagination the serial increases even if it was the first page of pagination. How can I solve this issue? — ven, Mar 16 '21 at 08:33

score 0 · Accepted Answer · answered Mar 16 '21 at 06:10

0

You are initializing serialNumber when you receive a ajax response. Do it on page load.

 function show(){
    let ajax = $.ajax({
         url     : '/Controller/method',
         method  : 'post',
         dataType: 'json',
         cache   : false
  });
  
  ajax.done(function(data){
      let serialNumber = 1; // move this to page load
      $.each(data.result, function(k, v){
            html += `<tr>
                         <td>${serialNumber}</td>
                         <td>${v.myColums}</td>
                     </tr>`;
            serialNumber++;
      });
  });

  $('.result').html(html);
}

answered Mar 16 '21 at 06:10

Orifjon

915
8
25

This alone would be 1-10 on page 1, 11-20 on page 2, then if they click back to page 1, it wouldn't be 1-10, it would be 21-30 on page 1 – freedomn-m Mar 16 '21 at 06:18
Yes, I get that problem, How can I fix this? – ven Mar 16 '21 at 08:35

score 0 · Answer 2 · answered Mar 16 '21 at 06:18

Declare a variable outside of the function

let serialNumber = 1;

function show(){
    let ajax = $.ajax({
        url     : '/Controller/getAll',
        method  : 'post',
        dataType: 'json',
        cache   : false
    });
    
    ajax.done(function(data){
        $.each(data.result, function(k, v){
            html += `<tr>
                         <td>${serialNumber}</td>
                         <td>${v.myColums}</td>
                     </tr>`;
            serialNumber++;
          });
    });
}

Another option is to return the page number from PHP and calculate the start point of the serial

score 0 · Answer 3 · edited Sep 29 '22 at 20:59

0

You can try this:

$page = ($this->uri->segment(3)) ? $this->uri->segment(3) : 1;
$data["slno_start"] = (($page-1) * $config["per_page"]) + 1;

edited Sep 29 '22 at 20:59

Adrian Mole

49,934
160
51
83

answered Sep 24 '22 at 12:40

Manzurul Alam

1
1

Continue counting serial number affer page on pagination

3 Answers3