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

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.

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

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


Related FAQ

Here are some more FAQ related to this Article:

  1.   jQuery redirect the user from one page to another
  2.   How to Create a Currency Converter using Pipe with Angularjs?
  3.   ImageViewer-angular image zoom-in And Zoom-Out Example
  4.   Laravel Delete Multiple Checkboxes Example
  5.   Angular UI Grid Table Tutorial With Example
  6.   AngularJS Datepicker Example Code With Demo
  7.   Morris.js Dynamic Data Example PHP Mysql
  8.   Simple PHP jQuery Ajax Insert Update Delete using MySQLi
  9.   Laravel 6 Sweet Alert Tutorial With Example
  10.   jQuery Disable Mouse Right Click Examples