在 dataTable 上滚动数据应该从服务器端加载并附加到现有记录

Question

使用节点 js 和 bootstrap 我正在开发一个 Web 应用程序。我有一个使用 Data Table 实现的 table。我正在使用服务器端代码执行搜索和排序。最初我正在获取 50 条记录。所有这些都工作正常。

现在我想在滚动到达底部时从服务器端加载数据（接下来的 50 条记录）。

目前我的代码是，

$('#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"]]
    });

我的后台代码是

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);
});});

我尝试了一些逻辑，但对我没有用。从这段代码我必须如何继续。

Answer 1

我知道这是一个旧的post，但是看到：https://datatables.net/extensions/scroller/examples/initialisation/server-side_processing.html

据我所知，您只需添加：

    scroller: {
        loadingIndicator: true
    }

给你的 .dataTable({ 初始化。

Answer 2

使用 Ajax 试试这个方法。

Load Data Dynamically on Page Scroll using jQuery AJAX and PHP

你必须添加

scroller: {
    loadingIndicator: true
}

在 dataTable 上滚动数据应该从服务器端加载并附加到现有记录

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

ajax

datatable

jquery

server-side

twitter-bootstrap