jquery datatables ajax json example – Ajax source

JavaScript jQuery

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.   Autocomplete Textbox using jQuery, PHP and MySQLi
  2.   Angular UI Grid Table Tutorial With Example
  3.   Nodejs Login and Registration with PHP MySQL and SQLite Example
  4.   print a specific area of the web page using jQuery
  5.   How to get current date and time in VueJS?
  6.   PHP Laravel Autocomplete search from Database Example
  7.   Jquery Fancybox Popup Simple Example
  8.   JavaScript inArray Check if value exists
  9.   jQuery Full screen Navigation Overlay
  10.   Simple PHP Create Custom Captcha Generator

Leave a Reply

Your email address will not be published. Required fields are marked *