On dataTable scroll data should load from server side and append to existing records

Question

using node js and bootstrap I am developing a web application . I have a table implemented using Data Table. I am performing my search and sort using server side code . Initially I am fetching 50 records. All these were working fine.

Now I want to load data (next 50 records ) from server side when scroll reached bottom.

Currently my code is ,

$('#table-goal').dataTable({
        "fnInitComplete" : function() {
            $('.dataTables_scrollBody').mCustomScrollbar({
                theme : "dark-3",
                callbacks : {
                    whileScrolling : function() {
                        //alert("scroll");
                        if (this.mcs.topPct == 100) {
                            // Need to load data using the same ajax and append data to the previous 50 records.
                        }
                    }
                }
            });
        },
        "scrollY" : "230px",
        "scrollCollapse" : true,
        "paging" : false,
        "info" : false,
        "processing" : true,
        "serverSide" : true,
        "ajax" : {
            "url" : "/list/goals/suggestion",
            "type" : "POST",
            "data" : function(d) {
                var custom = {};
                custom.columnLength = d.columns.length;
                custom.orderColumn = d.order[0].column;
                custom.orderDir = d.order[0].dir;
                d.type = "goal";
                d.custom = custom;
                //d.limit = limit;
                //d.offset = offset;
            }
        },
        "bAutoWidth" : true,
        "columns" : [{
            "data" : "name"
        }, {
            "data" : "flag"
        }, {
            "data" : "goal_id"
        }],
        "columnDefs" : [{
            "render" : function(data, type, row) {
                return '<div class="goal_name" data-name="' + data + '"><span>' + row.name + '</span></div>';
            },
            "targets" : 0,
        }, {
            "render" : function(data, type, row) {
                if (data == 'yes') {
                    return '<div class="review-editable keywords text-center" data-type="goal"><span class="top-adjust"><img class="friend-icon" src="/images/target/friends.png"></span></div>';
                } else {
                    return '<div class="review-editable keywords text-center" data-type="goal"></div>';
                }

            },
            "orderable" : false,
            "targets" : 1
        }, {
            "render" : function(data, type, row) {
                if (data == null) {
                    data = '';
                }
                return '<div class="text-center add-near-data"><span class="list-view"> <a class="btn-circle-add"> <img src="/images/target/add.png"> </a></span></div>';
            },
            "targets" : 2
        }],
        "order" : [[0, "asc"]]
    });

And my backend code is

router.post('/list/goals/suggestion', function(req, res) {
var reqData = req.body;
var sess = req.session;
var id = sess.userId;


var columnCount = reqData["custom"].columnLength;
var orderColumn = reqData["custom"].orderColumn;
var orderDir = reqData["custom"].orderDir;
var getSearchValue = reqData["search"].value;
if (getSearchValue == undefined) {
    getSearchValue = '';
}
/* * Paging */
var sLimit = "";
if (req.body.start != '-1' && req.body.length != '-1') {
    var sLimit = " LIMIT " + req.body.length + " OFFSET " + req.body.start;
} else {
    var sLimit = " LIMIT  50  OFFSET 0 ";
}

/* * Ordering */

if (columnCount > 0) {
    console.log('---------');
    var sOrder = "ORDER BY  ";
    for (var i = 0; i < columnCount; i++) {
        if (orderColumn == i) {
            sOrder += reqData["columns"][i].data + " " + orderDir + ", ";
        }
    }
    sOrder = sOrder.slice(0, -2);
    if (sOrder == "ORDER BY") {
        sOrder = "";
    }
}

/* * Filtering */
var sWhere = "";
if (getSearchValue != "") {
    getSearchValue = getSearchValue.toUpperCase();
    var sWhere = "WHERE (";
    for (var i = 0; i < columnCount; i++) {
        sWhere += "UPPER(name) LIKE '%" + getSearchValue + "%' OR ";
    }
    sWhere = sWhere.slice(0, -3);
    sWhere += ')';
}

var sQuery = "SELECT g.goal_id,name,flag FROM goal AS g LEFT JOIN (SELECT DISTINCT on (goal_id)  goal_id,flag FROM user_goal_assoc ug LEFT JOIN (select 'yes' as flag,(CASE WHEN party_id = '" + id + "'  then party_friend_id ELSE party_id END) AS friend_id from friend where (party_id = '" + id + "' or party_friend_id = '" + id + "') and status = 1) as fr on (fr.friend_id =ug.creater_id AND  creater_id != '" + id + "' and status = 1)) AS ug ON ( g.goal_id = ug.goal_id) " + sWhere + " " + sOrder + " " + sLimit;


client.query(sQuery, function(err, goalList) {
    //console.log(goalList.rows);
    var obj = {
        "draw" : req.body.draw,
        "data" : goalList.rows
    };

    res.send(obj);
});});

I tried few logics but it didn't worked for me. From this code how I have to proceed.

Answer 1

I know this is an old post, but see: https://datatables.net/extensions/scroller/examples/initialisation/server-side_processing.html

From what I can see you should just have to add:

    scroller: {
        loadingIndicator: true
    }

To your .dataTable({ init.

Answer 2

Try this way using Ajax.

Load Data Dynamically on Page Scroll using jQuery AJAX and PHP

You have to add

scroller: {
    loadingIndicator: true
}