datatable always shows "loading" and no data got load?

datatable always shows "loading" and no data got load?

SummerJ1745SummerJ1745 Posts: 9Questions: 3Answers: 0

Hi, I followed example on the website and have html as following. The page always show "loading" without any contents got load.
Any suggestion?

<!DOCTYPE html>
<html>
<head>
     <link rel='stylesheet' href='https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css'>
   <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
   
   <script src='https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js'></script>
   <script type="text/javascript" src="https://www.datatables.net/media/js/site.js?_=9831ea28f2ee98e525c11ef017a71afa"></script>
    <script type="text/javascript" src="https://www.datatables.net/media/js/dynamic.php?comments-page=examples%2Fdata_sources%2Fajax.html" async=""></script>
        <script type="text/javascript" src="https://www.datatables.net/examples/resources/demo.js" async=""></script>
        

        <meta charset=utf-8 />
        <title>DataTables - JS Bin</title>
    <style type="text/css" class="init">
    body {
        font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
        margin: 0;
        padding: 0;
        color: #333;
        background-color: #fff;
    }


    div.container {
        min-width: 980px;
        margin: 0 auto;
    }

    div.dataTables_processing { z-index: 1; }
    </style>
        
    <script type="text/javascript" class="init">

        $(document).ready( function () {
        alert('doc ready');
            var table = $('#example').DataTable( {
                ajax: 'http://live.datatables.net/ajax/arrays.txt',
                processing: true
              } );
          $('#reload').click( function () {
            table.ajax.reload();
          } );
        } );

    </script>
</head>
<body>
      <button id="reload">Reload</button>
        <div class="container">
            <table id="example" class="display" width="100%">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Position</th>
                        <th>Office</th>
                        <th>Age</th>
                        <th>Start date</th>
                        <th>Salary</th>
                    </tr>
                </thead>

                <tfoot>
                    <tr>
                        <th>Name</th>
                        <th>Position</th>
                        <th>Office</th>
                        <th>Age</th>
                        <th>Start date</th>
                        <th>Salary</th>
                    </tr>
                </tfoot>
            </table>
        </div>
    </body>
</html>

This discussion has been closed.