1

Goal

My goal is to create a full-sized scrollable HTML table in which rows are lazy-loaded from a MySQL database.

What I tried

I am using DataTables based on this example:

The content of my Data Table is loaded from a MySQL database:

Result

Although the linked DetaTables guides working properly itself. When I combine the Scrollable extension, Server-side processing (lazy loading), and 100% height table, the result is inappropriate:

  • Only the first ajax element is loaded into the table, the other parts will remain unfilled. The ajax data is also not loaded as a result of scrolling.
    • Code snippet attached below

Another attempt - Bootstrap

I tried to use the example about Scrolling and Bootstrap tab

  • In this case, all of the rows are loaded by a single huge AJAX request and the client is overloaded (lazy loading not working).

Code Snippet

$(document).ready( function () {
  var table = $('#example').DataTable( {
    processing: true,
    serverSide: true,
    ajax: "server_processing.php", //source: https://datatables.net/examples/data_sources/server_side.html
    serverSide: true,
    ordering: true,
    searching: false,
    scrollX: true,
    scroller: {
        loadingIndicator: true
    }
  } );
} );
<link href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" rel="stylesheet"/>
<link href="https://cdn.datatables.net/scroller/2.0.3/css/scroller.dataTables.min.css" rel="stylesheet"/>

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/scroller/2.0.3/js/dataTables.scroller.min.js"></script>



<table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th>First name</th>
                <th>Last name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>First name</th>
                <th>Last name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
    </table>
questionMark
  • 97
  • 2
  • 11
  • "which rows are lazy-loaded from a MySQL" how many rows are you talking about? and would it not be better to introduce some pagination? (see, i.e., [this](https://stackoverflow.com/questions/20364349/pagination-using-mysql-limit-offset)) – Luuk Nov 30 '20 at 17:29
  • BTW, 100% height of what? The Eiffel tower? – Luuk Nov 30 '20 at 17:32
  • The table can contain elements from 10 000 to 100 000. It is not exactly determined yet. I know pagination and it would work properly, but in this case especially important to use scrolling. – questionMark Nov 30 '20 at 17:33
  • Updated the height – questionMark Nov 30 '20 at 17:34
  • You're using a whole bunch of arguably outdated libraries to do this and piece everything together. Have you considered trying this with just plain javascript tools? You probably don't need these abstractions. – Evert Nov 30 '20 at 17:45
  • @Evert, What javascript tools do you recommend? – questionMark Nov 30 '20 at 17:48
  • Sorry I meant, consider avoiding libraries and use plain CSS and Javascript. – Evert Nov 30 '20 at 18:00
  • 1
    @Evert I see, but how would the use of plain CSS and Javascript solve the problem? Could you show an example? – questionMark Nov 30 '20 at 18:03
  • Sorry, I don't.. it's a fairly complex problem and will require a bunch of work to get everything together. I just think generally you'll have better luck long-term if you take the time to understand browser APIs instead of relying on jQuery snippets. If there's bugs, there's probably not going to be people around to fix them. – Evert Nov 30 '20 at 19:08

0 Answers0