Pagination not working?? - jQuery or Javascript

Question

I just create dynamic table with Pagination but the pagination is not working with that table..

Im using bootstrap table with jquery.

I want to allow 5 rows only display, remaining rows are paginate.

Here is my fiddle

How to paginate when dynamically add rows.

Here is a example code.

$(document).ready(function() {
  $("#add_Row").on("click", function() {
    var counter = 0;
    var idVal = $('#tab_logic tr:last').find('td:first').html();
    var matches = idVal.match(/\d+/g);
    if (matches != null) {
      counter = Number(matches) + counter + 1;
    }
    // alert(counter);
    var newRow = $("<tr>");
    var cols = "";
    cols += '<td class="cashpay_led" style="display:none;"><input type="number" class="form-control" id="table_ledger' + counter + '" name="ledgerno" placeholder="ledger number"/></td>';
    cols += '<td><input type="number" class="form-control sel_text" id="cashAcctcode' + counter + '" name="acctcode" placeholder="Account code"/></td>';
    cols += '<td><select class="form-control sel_sel status" id="accountName' + counter + '" name="accountName"><option>Choose A/c Name</option></select></td>'
    cols += '<td><textarea class="form-control pname required price" name="narr" placeholder="Enter your text here" id="acc_narrat' + counter + '" maxlength="200"/></textarea></td>';
    cols += '<td><input type="text" class="form-control" id="cashdeb' + counter + '" data-action="sumDebit" name="debit" placeholder="Debit amount"/></td>';
    cols += '<td><input type="number" class="form-control comment" id="crditCash' + counter + '" data-action="sumCredit" name="credit" placeholder="Credit amount" tabindex="-1" readonly/></td>';

    cols += '<td><button type="button" class="adRow ibtnDel" style="width:70%;">x</button></a></td>';

    newRow.append(cols);

    $("table.order-list").append(newRow);
    setValCashVal('accountName'.concat(counter));
    bindScript();
    counter++;
  });

});

// pagination

$(function() {
  $('#tab_logic').DataTable({
    'paging': true,
    'lengthChange': false,
    'searching': true,
    'ordering': true,
    'info': false,
    'autoWidth': false,
    'pageLength': 5
  })
});

<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css" />
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.js"></script>
<div class="container">
  <div class="row clearfix">
    <div class="col-md-12 column">

      <table class="table table-bordered table-hover order-list" id="tab_logic">
        <tbody>
          <tr id="fst_row">
            <td style="display: none;">
              <input type="number" id="staticLedger" placeholder='Ledger Number' for="staticLedger" name="ledgerno" class="form-control" />
            </td>
            <td style="display: none;">
              <input type="text" id="tdsrow" placeholder='Ledger Number' name="tdsrow" value="Y" th:value="Y" class="form-control" />
            </td>
            <td>
              <input type="number" id="payacc_code" placeholder='Enter A/c code' for="acctcode" name="acctcode" class="form-control sel_text" />
            </td>
            <td>
              <select class="form-control sel_sel" id="payacc" name="actname" for="actname">
              </select>
            </td>
            <td>
              <textarea class="form-control pname required" id="pay_narrat" name="narr" for="narr" placeholder="Enter your text here"></textarea>

            </td>
            <td>
              <input type="text" id="paydeb" name="debit" for="debit" placeholder='Debit Amount' data-action="sumDebit" class="form-control" readonly />
            </td>
            <td>
              <input type="number" id="paycredit" name="credit" for="credit" placeholder='Credit Amount' data-action="sumCredit" class="form-control" tabindex="-1" readonly />
            </td>
            <td><button type="button" class="adRow" style="width:70%; cursor: not-allowed;">x</button></a>
            </td>
          </tr>
          <input type="button" class="add_Row adRow" id="add_Row" value="Add Row">
        </tbody>
      </table>

    </div>
  </div>
</div>

What im doing wrong?

How to set paginate in dynamically add rows.

Thank you

did you add Datatable CDN. as there is no DATATABLE CDN .and no value for first select list — Aishwarya
– Aishwarya, Commented Nov 5, 2019 at 5:38
Hi check this answer stackoverflow.com/a/28141195/7943457 You need to let the datatable know that rows have changed, so please re-render — Piyush
– Piyush, Commented Nov 5, 2019 at 6:15

Aishwarya · Accepted Answer · 2019-11-05 07:03:07Z

There are some mistake in your code snippet : 1.In table th tags are less than td , which you are appending 2.Calling Datatable before Jquery define

If you want to set paginate in dynamically add rows, then you have to destroy it and reinitialise it. I remove some hidden properties just to check,you can hide them adding class "columnDefs": [{ "class": "hide", "targets": 3 } ] OR "columnDefs": [{"targets": [ 2 ],"visible": false}] Hope this will help you

$(document).ready(function() {
  $("#add_Row").on("click", function() {
  
    var counter = 0,setValCashVal =0;
    var idVal = $('#tab_logic tr:last').find('td:first').html();
    var matches = idVal.match(/\d+/g);
    if (matches != null) {
      counter = Number(matches) + counter + 1;
    }
    // alert(counter);
    if ($.fn.DataTable.isDataTable('#tab_logic')) {
 $('#tab_logic').DataTable().destroy()}
    var newRow = $("<tr>");
    var cols = "";
    cols += '<td class="cashpay_led" ><input type="number" class="form-control" id="table_ledger' + counter + '" name="ledgerno" placeholder="ledger number"/></td>';
    cols += '<td> <input type="text" id="tdsrow' + counter + '" placeholder="Ledger Number" name="tdsrow" value="Y" th:value="Y" class="form-control" /></td>';
    
    
    cols += '<td><input type="number" class="form-control sel_text" id="cashAcctcode' + counter + '" name="acctcode" placeholder="Account code"/></td>';
    cols += '<td><select class="form-control sel_sel status" id="accountName' + counter + '" name="accountName"><option>Choose A/c Name</option></select></td>'
    cols += '<td><textarea class="form-control pname required price" name="narr" placeholder="Enter your text here" id="acc_narrat' + counter + '" maxlength="200"/></textarea></td>';  
    cols += '<td><input type="text" class="form-control" id="cashdeb' + counter + '" data-action="sumDebit" name="debit" placeholder="Debit amount"/></td>';
    cols += '<td><input type="number" class="form-control comment" id="crditCash' + counter + '" data-action="sumCredit" name="credit" placeholder="Credit amount" tabindex="-1" readonly/></td>';

    cols += '<td><button type="button" class="adRow ibtnDel" style="width:70%;">x</button></a></td>';

    newRow.append(cols);

    $("table.order-list").append(newRow);
 //   setValCashVal('accountName'.concat(counter));
    //bindScript();
   $('#tab_logic').DataTable({
    'paging': true,
    'lengthChange': false,
    'searching': true,
    'ordering': true,
    'info': false,
    'autoWidth': false,
    'pageLength': 5
  })
    counter++;
  
  
   });
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

  <head>
    <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
    <script src="
https://cdn.datatables.net/1.10.20/js/dataTables.jqueryui.min.js"></script>
    <link  rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
    
       <link  rel="stylesheet" href=" https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link  rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.jqueryui.min.css">
    <link  rel="stylesheet" href="https://cdn.datatables.net/scroller/2.0.1/css/scroller.jqueryui.min.css">
  </head>

  <body>
  <div class="container">
  <div class="row clearfix">
    <div class="col-md-12 column">

      <table class="table table-bordered table-hover order-list" id="tab_logic">
        <thead>
          <tr style="background-color: #680779; color: #fff;">
            <th></th><th></th>
            <th class="text-center">
              Account Code
            </th>
            <th class="text-center">
              A/c Name*
            </th>
            <th class="text-center">
              Narration*
            </th>
            <th class="text-center">
              Debit*
            </th>
            <th class="text-center">
              Credit
            </th>
            <th class="text-center">
              Action
            </th>
          </tr>
        </thead>
        <tbody>
          <tr id="fst_row">
            <td >
              <input type="number" id="staticLedger" placeholder='Ledger Number' for="staticLedger" name="ledgerno" class="form-control" />
            </td>
            <td >
              <input type="text" id="tdsrow" placeholder='Ledger Number' name="tdsrow" value="Y" th:value="Y" class="form-control" />
            </td>
            <td>
              <input type="number" id="payacc_code" placeholder='Enter A/c code' for="acctcode" name="acctcode" class="form-control sel_text" />
            </td>
            <td>
              <select class="form-control sel_sel" id="payacc" name="actname" for="actname"><option>Choose A/c Name</option>
              </select>
            </td>
            <td>
              <textarea class="form-control pname required" id="pay_narrat" name="narr" for="narr" placeholder="Enter your text here"></textarea>

            </td>
            <td>
              <input type="text" id="paydeb" name="debit" for="debit" placeholder='Debit Amount' data-action="sumDebit" class="form-control" readonly />
            </td>
            <td>
              <input type="number" id="paycredit" name="credit" for="credit" placeholder='Credit Amount' data-action="sumCredit" class="form-control" tabindex="-1" readonly />
            </td>
            <td><button type="button" class="adRow" style="width:70%; cursor: not-allowed;">x</button>
            </td>
          </tr>
          <input type="button" class="add_Row adRow" id="add_Row" value="Add Row">
        </tbody>
      </table>

    </div>
  </div>
  </div></body></html>

Am facing two error mam, 1st one is "Cannot read property 'mData' of undefined" 2nd one is "Cannot read property 'parentNode' of null"
"Cannot read property 'mData' of undefined" -- Due to th tags are not same as you appending td. Count your th and td tags make them equal of count.refere this -- jsfiddle.net/AishwaryaDomde/hvu5kwbo/7/#save Also "DataTables does not support rowspan / colspan in the table body"
mam, this is my current issue.. please check it this -jsfiddle.net/gz3jbcyf/2
can you reshare your code in jsbin .JSfilddle is showing bad gateway
please refer this - jsbin.com/tehimicele/edit?html,js,output

Collectives™ on Stack Overflow

Pagination not working?? - jQuery or Javascript

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related