server side api.rows( {page:'current'} ).data() returns all rows

kingquattro

Link to test case: Given the large scope and server side script hard to create a test case

Description of problem: Here is the overall problem, data is being pulled from a MySQL database (across multiple tables) and I would like to render about 3 pie charts per row using Chartjs library. As I search across the forum I didn't find a solution and I am working on developing a solution.

So far I can:
- load the data from the database
- create paging
- able to search across fields

I am currently using column render to create a dummy div which I am hoping to use later to draw a chart (here is my entire datatables JS so far)

        var dt = $('#library_datatable').DataTable({
            processing: true,
            serverSide: true,
            pageLength: 50,
            responsive: true,
            lengthMenu: [[10, 50, 100, 500, 1000, 5000], [10, 50, 100, 500, 1000, 5000]],
            ajax: {
                'url': "{{ url('library_q') }}",
                'data': function(data) {
                    // Append to data
                    data.project = filter_by['project'];
                    data.seqmethod = filter_by['seqmethod'];
                    data.envpackage = filter_by['envpackage'];
                }
            },
            columns: [
                {
                // first column to sticky mark a row
                    "class": "details-control",
                    "orderable": false,
                    "data": null,
                    "defaultContent": "",
                    "render": () => {
                        return '<i class="fas fa-chevron-right rotate"></i>';
                    },
                },
                {
                    "data": "project",
                },
                {
                    "data": "library_name",
                    "render": function(data, type, row, meta) {
                        return renderLibraryInfoColumn(data, row)
                    }
                },
                {
                    "data": "fxn_cnt",
                    "render": function(data, type, row, meta) {
                        return renderViromeCategoriesChart(data, row, meta)
                    }
                },
                {
                    "data": "complete_cnt",
                    "render": function(data, type, row, meta) {
                        return renderOrfTypeChart(data, row, meta)
                    }
                },
                {
                    "data": "lineage",
                    "render": function (data, type, row, meta) {
                        return renderTaxonomyChart(data, row, meta)
                    }
                },
            ],
            // TODO: custom order library based on name/prefix/project
            "order": [[2, 'asc']],
            "drawCallback": function( settings ) {
                var api = this.api();

                // Output the data for the visible rows to the browser's console
                rows = api.rows( {page:'current'} ).data()

                console.log(rows.length)
            }
        });

here is the function that create dummy div

        function renderViromeCategoriesChart(data, row, meta){
             return ("<div id='chart_" + meta.row +"_"+ meta.col + "'/>")
        };

So the MAIN QUESTION RIGHT NOW IS:

in drawCallback:... api.rows( {page:'current'} ).data() returns all rows from ajax query, not 50 (the current page limit).

How do I limit the rows returned to only the rows from the current page (even better only get rows that are in the current view of the page).

My thought process here is when drawCallback is called each rows will have

so now I can use chartjs to create charts for each div based on the data for each row as returned from the server.

Thank you

kthorngren

Your drawCallback code works properly here:
http://live.datatables.net/kuvuceqo/1/edit

Plus with server side processing the only rows at the client are those shown on the page so you wouldn't. need {page:'current'}. See this example without {page:'current'}:
http://live.datatables.net/pipefimi/1/edit

returns all rows from ajax query

Sounds like your server script is not doing the paging as described in the server side docs. Here is a non-serverside example showing the same statement works:
http://live.datatables.net/bohagece/1/edit

Can you post a link to your page or a running test case showing the issue so we can take a look?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin