duanbing2963 2018-08-30 13:57
浏览 69
已采纳

数据表未显示默认分页和搜索栏

I have used datatables in other pages of my website and i tend to declare scripts in each file saperately instead declaring them in header. Other pages are showing pagination perfectly, i am having problem with this particular page only.

<div class="page-wrapper">

  <div class="container-fluid" >
    <div class="col-sm-12">
      <div class="card">

        <table border="0"  cellpadding="5">
          <tbody><tr>
            <td>Minimum age:</td>
            <td><input type="text" id="min" name="min"></td>
            <td>Maximum age:</td>
            <td><input type="text" id="max" name="max"></td>
            </tr>
          </tbody>
        </table>

        <div class="table-responsive" >

          <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
          <link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css">
          <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>


          <table id="example" class="display" style="width:100%">
            <thead>


              <tr>
                //table headers

              </tr>
            </thead>
            <tbody>
             //table body
                  }
                }else {
                  echo "<tr>";
                  echo "<td colspan='6'>";
                  echo "<h4 class='text-danger'>No Data Found</h4>";
                  echo "</td>";
                  echo "</tr>";
                }
              ?>      
            </tbody>
          </table>
        </div>

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




  /* Custom filtering function which will search data in column four between two values */
  $.fn.dataTable.ext.search.push(
    function( settings, data, dataIndex ) {
      // var Row = document.getElementById("data_row");
      // var Cells = Row.getElementsByTagName("td");
      //   var age = Cells[0].innerText;
      //   console.log(age);
      //   var min = document.getElementById("min").value;
      //   var max = document.getElementById("max").value;// use data for the age column

      var min = parseInt( $('#min').val(), 10 );
      var max = parseInt( $('#max').val(), 10 );
      var age = parseFloat( data[3] ) || 0;

      if ( ( isNaN( min ) && isNaN( max ) ) ||
      ( isNaN( min ) && age <= max ) ||
      ( min <= age   && isNaN( max ) ) ||
      ( min <= age   && age <= max ) )
      {
        return true;
      }
      return false;
    }
  );

  $(document).ready(function() {
    var table = $('#example').DataTable();

      // Event listener to the two range filtering inputs to redraw on input
      $('#min, #max').keyup( function() {
        table.draw();
      } );
    } );


</script>

Following is the error in console,

Uncaught TypeError: Cannot read property 'length' of undefined

at Ia (jquery.dataTables.min.js:24)

at HTMLTableRowElement.<anonymous> (jquery.dataTables.min.js:17)

at jquery-3.3.1.js:194

at Function.map (jquery-3.3.1.js:443)

at jQuery.fn.init.map (jquery-3.3.1.js:193)

at na (jquery.dataTables.min.js:16)

at e (jquery.dataTables.min.js:92)

at HTMLTableElement.<anonymous> (jquery.dataTables.min.js:93)

at Function.each (jquery-3.3.1.js:354)

at jQuery.fn.init.each (jquery-3.3.1.js:189)

I referred and borrowed the source code from following sources https://datatables.net/examples/plug-ins/range_filtering.html

It would be great if someone could tell me what am i doing wrong?

Thank you for your suggestions

  • 写回答

1条回答 默认 最新

  • duanchendu69495 2018-08-30 14:31
    关注

    you can see your example here :-

    we create code with dummy data link

    might you have issue with starting PHP tag :-

    at here

    <tbody>
                 //table body
                      }
                    }else {
                      echo "<tr>";
                      echo "<td colspan='6'>";
                      echo "<h4 class='text-danger'>No Data Found</h4>";
                      echo "</td>";
                      echo "</tr>";
                    }
                  ?>      
                </tbody>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 求chat4.0解答一道线性规划题,用lingo编程运行,第一问要求写出数学模型和lingo语言编程模型,第二问第三问解答就行,我的ddl要到了谁来求了
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥15 maple软件,用solve求反函数出现rootof,怎么办?
  • ¥65 汇编语言除法溢出问题
  • ¥15 Visual Studio问题
  • ¥20 求一个html代码,有偿
  • ¥100 关于使用MATLAB中copularnd函数的问题
  • ¥20 在虚拟机的pycharm上
  • ¥15 jupyterthemes 设置完毕后没有效果