DataTable Server Side Pagination

dataTabel server side pagination with json

by Ganesh

HTML

<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//cdn.datatables.net/1.10.6/js/jquery.dataTables.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.6/css/jquery.dataTables.css">
<h1>CodePoet Server side table load</h1>

<br>

<button id="getResults">Add More</button>
<table id="example" class="display" width="100%" cellspacing="0">
    <thead>
        <tr>
            <th>first_name</th>
            <th>last_name</th>
            <th>position</th>
            <th>company</th>
            <th>country</th>
            <th>skill</th>
           
        </tr>
    </thead>
   
</table>

JavaScript

$(document).ready(function() {
//var dTable = $('#example').DataTable();
var jsonData = [{
    "first_name": "JJJJJack",
    "last_name": "Kumar",
    "position": "Web Developer",
    "company": "Wipro",
    "country": "UK",
    "skills": "HTML5"
}, {
    "first_name": "Peteee",
    "last_name": "Ran",
    "position": "Web developer",
    "company": "Adobe",
    "country": "US",
    "skills": "Hybris"
}];


   var myTable = $('#example').DataTable( {
        "processing": true,
        "serverSide": true,
        "ajax": {
            "url": "http://www.codepoet.in/MOCK_DATA.json",
            "type": "POST"
        },
        "columns": [
            { "data": "first_name" },
            { "data": "last_name" },
            { "data": "position" },
            { "data": "company" },
            { "data": "country" },
            { "data": "skills" }
        ]
    } );
    
    
     $("#getResults").click(function() {
 
        
                $('#example').DataTable().clear();
               
                console.log(result);
                //$.each(logs, function(index, value) {
                    $('#example').DataTable().rows.add(jsonData).draw();
                //});
				      // $('#example').DataTable().draw();
     
    });
} );