DataTable Ajax Json

DataTable server side script with Json data

by Ganesh

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.css">
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.js"></script>
<table id="exampleTable">
  <thead>
    <tr>
      <th>First name</th>
      <th>Last name</th>
      <th>Position</th>
      <th>company
        <select id="delco">
          <option>Select</option>
          <option value="1">Wipro</option>
          <option value="2">Shell</option>
        </select>
      </th>
      <th>country</th>
      <th>skills</th>
    </tr>
  </thead>
  <tbody>

  </tbody>
</table>


<button id="addRows">add</button>

JavaScript

var jsonData;
var firstJsondata;
var delcoVal;
var count = 0;
var delcoData;

var dTable = $('#exampleTable').DataTable({
 "LengthMenu": [[100, 200, 300], [100, 200, 300]],
  // "DisplayLength": 100,
  // "DisplayStart" : 0,
   "Processing": true,
"ServerSide": true,
"ServerMethod": "POST",
  // "AjaxDataProp" : "",
  //data:firstJsondata,
  "TotalRecords":"500",

   "pageLength":10,
  "stateSave": false,
  "ajax": {
    "url": "http://www.codepoet.in/MOCK_DATA.json?countset=1",
    "dataSrc": ""
  },
  columns: [{
    data: 'first_name'
  }, {
    data: 'last_name'
  }, {
    data: 'position'
  }, {
    data: 'company'
  }, {
    data: 'country'
  }, {
    data: 'skills'
  }, ]
});

var info = dTable.page.info();
console.info(info);
$('#addRows').on('click', function() {
  count++;
 
  $.ajax({
    type: "POST",
    url: 'http://www.codepoet.in/MOCK_DATA_1.json?countset=' + count,

    dataType: "json",
    success: function(data) {
      return jsonData = data;
    },
    error: function() {
      alert('Error occured');
    }
  });
  
  console.log("Add Rows"+count);
  console.info("before"+info.length);
  dTable.clear();
  
  dTable.rows.add(jsonData).draw(false);
  console.info("after Clear"+info.length);

});

$("#delco").change(function() {
  delcoVal = this.value;
  console.log(delcoVal);
  $.ajax({
    type: "POST",
    url: 'http://www.codepoet.in/MOCK_DATA_2.json?delco=' + delcoVal,

    dataType: "json",
    success: function(data) {
      return delcoData = data;
    },
    error: function() {
      alert('Error occured from RESTful service');
    }
  });
  
  dTable.clear().draw();
  dTable.rows.add(delcoData).draw();

});
//if(count=="1"){
//  $('#addRows').click();
//}