datatables not displaying default pagination and s

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

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>