jquery datatables ajax json example – Ajax source

jquery datatables ajax json example – Ajax source

datatables ajax example – jquery datatables ajax json example

Basically all of the paging data to pagination, filtering data to pagination, sorting data to pagination etc that DataTables does can be handed of the off to a Server-side data server.
Server-side all the data processing is enabled by virtual setting the serverSide data-table option to true or false and providing an simple jquaey Ajax data source through the all the data content ajax option.jquery datatables ajax json example – Ajax source

Also Read This πŸ‘‰   Remove Last Character from String jQuery

How to update your data object for AJAX JSON data retrieval Example

 <table id="example" >
        <thead>
            <tr>
                <th>No</th>
                <th>DataName</th>
                <th>web</th>
                <th>Address</th>
                <th>Status</th>
                <th>Action</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
               <th>No</th>
                <th>DataName</th>
                <th>web</th>
                <th>Address</th>
                <th>Status</th>
                <th>Action</th>
            </tr>
        </tfoot>
    </table>
<script src="jquery.dataTables.min.js"></script>

Using a Json object to create an Html table using Datatables

$(document).ready(function() {
    $('#example').DataTable( {
        "ajax":  "http://mor.tax/external/test.txt",
        "columns": [
            { "data": "no" },
            { "data": "dataname" },
            { "data": "web" },
            { "data": "home.address" },
            { "data": "status" },
            { "data": null }
        ],
        "columnDefs": [ {
            "targets": -1,
            "data": null,
            "defaultContent": "<button>Click!</button>"
        } ]
    } );
} );

display data using jQuery datatables, AJAX and JSON

$(document).ready(function() {
    $('#example').DataTable( {
        "processing": true,
        "serverSide": true,
        "ajax": "../Pakainfo.com/admin/datatable.php"
    } );
} );

Datatable demo (server side) in php

<div class="container" id="example-csvtavle">
	<div class="table-responsive">
	<table id="example" class="mdl-data-table">
		<thead>
			<tr>
				<th>Name</th>
				<th>ID</th>
	
			</tr>
		</thead>
		<tfoot>
			<tr>
				<th>Name</th>
				<th>ID</th>
			</tr>
		</tfoot>
	</table>
	</div>
</div>

datatables server side processing with post example

This example shows a very simple data table, matching the columnDefs other examples, but in this instance all the column display using server-side processing.

Free Live Chat for Any Issue

if (typeof access_token != 'undefined')
{
$("#example-csvtavle").show();
$('#example').show();
	$('#example').DataTable( {
		"ajax":  mynewurl,
		dom: 'Bfrtip',
		buttons: [
            {
                extend: 'csv',
                text: 'Export To Csv'
            }
        ],
		"columns": [
			{ "data": "name" },
			{ "data": "id" }
		],
		"columnDefs": [ {
			"targets": -1,
			"className": 'mdl-data-table__cell--non-numeric',
			"data": null,
			"defaultContent": "<button>Click!</button>"
		} ]

	} );
}
else{
	alert("Please Login First");
}

Show JSON Data in Jquery Datatables Example

See DataTables.net for more information about the reload method

Also Read This πŸ‘‰   javascript refresh div on click- How to refresh a page by jQuery/JavaScript?

var example = $('#example').DataTable({
  'ajax': {
    "type"   : "POST",
    "url"    : '/path/to/your/Pakainfo.com',
    "data"   : function( d ) {
      d.example_key1= $('#example_input1').val();
      d.example_key2= $('#example_input2').val();
      d.example_key3= $('#example_input3').val();
    },
    "dataSrc": ""
  },
  'columns': [
    {"data" : "name"},
    {"data" : "type"},
    {"data" : "time"},
    {"data" : "durat"}
  ]
});

//To Reload The Ajax
example.ajax.reload()

Example