таблицы данных не отображают нумерацию страниц по умолчанию и панель поиска - PullRequest
Новая
       14

таблицы данных не отображают нумерацию страниц по умолчанию и панель поиска

0 голосов
/ 30 августа 2018

Я использовал таблицы данных на других страницах моего сайта, и я стараюсь объявлять сценарии в каждом файле отдельно, вместо этого объявляя их в заголовке. Другие страницы показывают нумерацию страниц отлично, у меня проблемы только с этой конкретной страницей. 

<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>

Ниже приведена ошибка в консоли,

Uncaught TypeError: Невозможно прочитать свойство 'length' из неопределенного 

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)

Я ссылался и позаимствовал исходный код из следующих источников https://datatables.net/examples/plug-ins/range_filtering.html

Было бы замечательно, если бы кто-нибудь сказал мне, что я делаю не так?

Спасибо за ваши предложения

1 Ответ

0 голосов
/ 30 августа 2018

Вы можете увидеть свой пример здесь: -

создаем код с фиктивными данными ссылка

может возникнуть проблема с запуском тега PHP: -

здесь 

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