title: On dataTable scroll data should load from server side and append to existing records
body: <p>using node js and bootstrap I am developing a web application . I have a table implemented using <a href="https://www.datatables.net/manual/styling/bootstrap" rel="nofollow">Data Table</a>. I am performing my search and sort using server side code . Initially I am fetching 50 records. All these were working fine. </p>
  
  <p>Now I want to load data (next 50 records ) from server side when scroll reached bottom. </p>
  
  <p>Currently my code is , </p>
  
  <pre><code>$('#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 '&lt;div class="goal_name" data-name="' + data + '"&gt;&lt;span&gt;' + row.name + '&lt;/span&gt;&lt;/div&gt;';
              },
              "targets" : 0,
          }, {
              "render" : function(data, type, row) {
                  if (data == 'yes') {
                      return '&lt;div class="review-editable keywords text-center" data-type="goal"&gt;&lt;span class="top-adjust"&gt;&lt;img class="friend-icon" src="/images/target/friends.png"&gt;&lt;/span&gt;&lt;/div&gt;';
                  } else {
                      return '&lt;div class="review-editable keywords text-center" data-type="goal"&gt;&lt;/div&gt;';
                  }
  
              },
              "orderable" : false,
              "targets" : 1
          }, {
              "render" : function(data, type, row) {
                  if (data == null) {
                      data = '';
                  }
                  return '&lt;div class="text-center add-near-data"&gt;&lt;span class="list-view"&gt; &lt;a class="btn-circle-add"&gt; &lt;img src="/images/target/add.png"&gt; &lt;/a&gt;&lt;/span&gt;&lt;/div&gt;';
              },
              "targets" : 2
          }],
          "order" : [[0, "asc"]]
      });
  </code></pre>
  
  <p>And my backend code is </p>
  
  <pre><code>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' &amp;&amp; req.body.length != '-1') {
      var sLimit = " LIMIT " + req.body.length + " OFFSET " + req.body.start;
  } else {
      var sLimit = " LIMIT  50  OFFSET 0 ";
  }
  
  /* * Ordering */
  
  if (columnCount &gt; 0) {
      console.log('---------');
      var sOrder = "ORDER BY  ";
      for (var i = 0; i &lt; 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 &lt; 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);
  });});
  </code></pre>
  
  <p>I tried few logics but it didn't worked for me. From this code how I have to proceed. </p>