Solution 1 :

I have tested your code on my side, it will display the “Cannot read property ‘mData’ of undefined” error in the Console view. This issue is related that the and have the different numbers of and , even it is disabled. So, to solve this issue, we could add two tag in the and set the CSS style: style="display:none".

Code as below (whole sample code):

                        <thead>
                            <tr style="background-color: #680779; color: #fff;">
                                <th style="display:none">staticLedger</th>
                                <th style="display:none">tdsrow</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 style="width: 11%;" class="text-center">
                                    Action
                                </th>
                            </tr>
                        </thead>

Then, the result as blow:

enter image description here

Problem :

jQuery table pagination and bootstrap buttons functions not working in internet explorer IE10 and IE11,Chrome and firefox is working fine but the IE10 and 11 not working totally.

I’m using bootstrap v4.3.1 and jQuery v3.4.1, and here I mentioned, I am using head tag links below, can anyone please tell me or suggest any way to solve this problems.

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

$('#add_Row').click(function() {
  $('#newDiv').show();
})
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  <meta http-equiv="X-UA-Compatible" content="IE=11">
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  <title>Dashboard</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">


  <!-- Font Awesome -->
  <link rel="stylesheet" type="text/css" href="css/fontawesome-free.all.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" type="text/css" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">

  <!-- date picker -->
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">

  <!-- DataTables -->
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/dataTables.foundation.css" />

  <!-- Select Picker -->
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.12/css/bootstrap-select.min.css" />

  <!-- DataTables -->
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css" />

  <!-- Bootstrap 4.3.1 -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

  <!-- Theme style -->
  <link rel="stylesheet" type="text/css" href="./css/schedule.min.css">
  <!-- Customizable Css -->
  <link rel="stylesheet" type="text/css" href="./css/style.css">
  <!-- Google Font: Source Sans Pro -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" th_href="@{https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700}">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.2/css/bootstrapValidator.min.css" th_href="@{webjars/bootstrapvalidator/0.5.2/css/bootstrapValidator.min.css}">
</head>

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

            <input type="button" class="btn btn-primary add_Row adRow pull-right" id="add_Row" value="Add new record">

          </div>
        </div>
        <div class="table-wrapper">
          <div class="table-scroll">
            <table class="table table-bordered table-hover order-list" id="example1">
              <thead>
                <tr style="background-color: #680779; color: #fff;">
                  <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 style="width: 11%;" class="text-center">
                    Action
                  </th>
                </tr>
              </thead>
              <tbody style="height: 230px;">
                <tr id="preTdsrow" class="form-group">
                  <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" tabindex="-1" readonly />
                  </td>
                  <td>
                    <select class="form-control sel_sel required" id="payacc" name="actname" for="actname" value="">
                      <option value="">Select TDS A/c name

                      </option>
                    </select>
                  </td>
                  <td class="form-group">
                    <input type="text" class="form-control required narr" id="pay_narrat" name="narr" data-toggle="modal" maxlength="200" data-target="#tdsModal" placeholder="Enter your text here" readonly />

                  </td>
                  <td>
                    <input type="number" id="paydeb" min="0" name="debit" placeholder='Debit Amount' data-action="sumDebit" class="form-control tdsTot alignAmt" onkeypress="restrictMinus(event);" readonly />
                  </td>
                  <td>
                    <input type="number" id="paycredit" name="credit" for="credit" placeholder='Credit Amount' data-action="sumCredit" class="form-control alignAmt" tabindex="-1" readonly />
                  </td>
                  <td style="width: 11%;"><button type="button" class="adRow" style="width:30%; position: relative;right: 25%; cursor: not-allowed;">x</button>
                  </td>
                </tr>
                <tr id="preTdsrow" class="form-group">
                  <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" tabindex="-1" readonly />
                  </td>
                  <td>
                    <select class="form-control sel_sel required" id="payacc" name="actname" for="actname" value="">
                      <option value="">Select TDS A/c name

                      </option>
                    </select>
                  </td>
                  <td class="form-group">
                    <input type="text" class="form-control required narr" id="pay_narrat" name="narr" data-toggle="modal" maxlength="200" data-target="#tdsModal" placeholder="Enter your text here" readonly />

                  </td>
                  <td>
                    <input type="number" id="paydeb" min="0" name="debit" placeholder='Debit Amount' data-action="sumDebit" class="form-control tdsTot alignAmt" onkeypress="restrictMinus(event);" readonly />
                  </td>
                  <td>
                    <input type="number" id="paycredit" name="credit" for="credit" placeholder='Credit Amount' data-action="sumCredit" class="form-control alignAmt" tabindex="-1" readonly />
                  </td>
                  <td style="width: 11%;"><button type="button" class="adRow" style="width:30%; position: relative;right: 25%; cursor: not-allowed;">x</button>
                  </td>
                </tr>
                <tr id="preTdsrow" class="form-group">
                  <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" tabindex="-1" readonly />
                  </td>
                  <td>
                    <select class="form-control sel_sel required" id="payacc" name="actname" for="actname" value="">
                      <option value="">Select TDS A/c name

                      </option>
                    </select>
                  </td>
                  <td class="form-group">
                    <input type="text" class="form-control required narr" id="pay_narrat" name="narr" data-toggle="modal" maxlength="200" data-target="#tdsModal" placeholder="Enter your text here" readonly />

                  </td>
                  <td>
                    <input type="number" id="paydeb" min="0" name="debit" placeholder='Debit Amount' data-action="sumDebit" class="form-control tdsTot alignAmt" onkeypress="restrictMinus(event);" readonly />
                  </td>
                  <td>
                    <input type="number" id="paycredit" name="credit" for="credit" placeholder='Credit Amount' data-action="sumCredit" class="form-control alignAmt" tabindex="-1" readonly />
                  </td>
                  <td style="width: 11%;"><button type="button" class="adRow" style="width:30%; position: relative;right: 25%; cursor: not-allowed;">x</button>
                  </td>
                </tr>
                <tr id="preTdsrow" class="form-group">
                  <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" tabindex="-1" readonly />
                  </td>
                  <td>
                    <select class="form-control sel_sel required" id="payacc" name="actname" for="actname" value="">
                      <option value="">Select TDS A/c name

                      </option>
                    </select>
                  </td>
                  <td class="form-group">
                    <input type="text" class="form-control required narr" id="pay_narrat" name="narr" data-toggle="modal" maxlength="200" data-target="#tdsModal" placeholder="Enter your text here" readonly />

                  </td>
                  <td>
                    <input type="number" id="paydeb" min="0" name="debit" placeholder='Debit Amount' data-action="sumDebit" class="form-control tdsTot alignAmt" onkeypress="restrictMinus(event);" readonly />
                  </td>
                  <td>
                    <input type="number" id="paycredit" name="credit" for="credit" placeholder='Credit Amount' data-action="sumCredit" class="form-control alignAmt" tabindex="-1" readonly />
                  </td>
                  <td style="width: 11%;"><button type="button" class="adRow" style="width:30%; position: relative;right: 25%; cursor: not-allowed;">x</button>
                  </td>
                </tr>
                <tr id="preTdsrow" class="form-group">
                  <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" tabindex="-1" readonly />
                  </td>
                  <td>
                    <select class="form-control sel_sel required" id="payacc" name="actname" for="actname" value="">
                      <option value="">Select TDS A/c name

                      </option>
                    </select>
                  </td>
                  <td class="form-group">
                    <input type="text" class="form-control required narr" id="pay_narrat" name="narr" data-toggle="modal" maxlength="200" data-target="#tdsModal" placeholder="Enter your text here" readonly />

                  </td>
                  <td>
                    <input type="number" id="paydeb" min="0" name="debit" placeholder='Debit Amount' data-action="sumDebit" class="form-control tdsTot alignAmt" onkeypress="restrictMinus(event);" readonly />
                  </td>
                  <td>
                    <input type="number" id="paycredit" name="credit" for="credit" placeholder='Credit Amount' data-action="sumCredit" class="form-control alignAmt" tabindex="-1" readonly />
                  </td>
                  <td style="width: 11%;"><button type="button" class="adRow" style="width:30%; position: relative;right: 25%; cursor: not-allowed;">x</button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="form-group" id="newDiv" style="display:none">
    <label>new :</label>
    <input type="text" class="newOne" id="new" />
  </div>


  <!-- jQuery -->
  <script type="text/javascript" src="js/jquery.min.js" th_src="@{webjars/jquery/3.4.1/jquery.min.js}"></script>
  <!-- date picker -->
  <script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" th_src="@{webjars/jquery-ui/1.12.1/jquery-ui.min.js}"></script>
  <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.19.0/jquery.validate.js"></script>
  <!-- DataTables -->
  <script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/umd/popper.min.js" th_src="@{webjars/popper.js/1.15.0/umd/popper.min.js}"></script>

  <!-- Bootstrap 4.3.1 -->
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

  <!-- Select Picker -->
  <script src="js/bootstrap-select.js" th_src="@{webjars/bootstrap-select/1.13.11/js/bootstrap-select.min.js}"></script>


  <!-- Schedule App -->
  <script src="js/schedule.js" th_src="@{./js/schedule.js}"></script>

  <!-- Page script -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.2/js/bootstrapValidator.min.js"></script>

  <!-- Custom script -->
  <script type="text/javascript" src="js/app.js" th_src="@{./js/app.js}"></script>
</body>

</html>

Comments

Comment posted by Jack Bashford

Could you also include your pagination code (

Comment posted by Zhi Lv

As Jack said, it is better to include the Data Table related code (Html elements, CSS styles and the related JavaScript script), so that we could test and reproduce the problem. Besides, you could also try to use F12 developer tools to check whether there has some error?

Comment posted by jsfiddle.net/joelshah/mLnzkuct

@JackBashford its code for too lengthy so i can do it with fiddle, here is that, please check and let me know.. –

Comment posted by jsfiddle.net/joelshah/mLnzkuct

@ZhiLv-MSFT here i updated code here.. –