jQuery DataTables

June 28, 2019 22:37

jQuery DataTables (edit)

  <!-- DataTables CSS -->
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css"> 
  <!-- jQuery -->
  <script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-1.12.4.js"></script> 
  <!-- DataTables -->
  <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

https://www.datatables.net/examples/ajax/

https://www.gyrocode.com/articles/tag/jquery-datatables/

https://gallery.technet.microsoft.com/scriptcenter/Server-Side-Paging-Sorting-4cd29194

How to modify your JSON returned objects before sending them to the tables using DataTables.js

https://medium.com/code-kings/datatables-js-how-to-modify-your-returned-ajax-json-data-before-sending-it-to-your-html-table-24a92244bc40

Ajax Loading Indicator:

$(document).ajaxStart(function () {
Pace.restart()
})

$.ajaxStart in AdminLTE

https://loading.io/spinner/

https://adminlte.io/themes/AdminLTE/pages/examples/pace.html

https://stackoverflow.com/questions/11961438/implement-a-loading-indicator-for-a-jquery-ajax-call

https://stackoverflow.com/questions/4355268/how-to-display-a-busy-indicator-with-jquery

http://jsfiddle.net/sd01fdcm/

http://jsfiddle.net/VpDUG/4952/

https://snippets.aktagon.com/snippets/204-How-to-display-an-animated-icon-during-Ajax-request-processing

jQuery DataTables for Beginner

https://www.codeproject.com/Tips/844403/jQuery-Datatables-For-Beginners

DYNAMIC COLUMN HEADER AND RESULT FROM AJAX CALL IN JQUERY DATATABLE (HAY HAY HAY - GOOD FOR CREATE PROTOTYPE)

https://blog.pheonixsolutions.com/dynamic-column-header-result-ajax-call-jquery-datatable/

jQuery DataTables - Dynamic Columns and Records (HAY)

https://www.codeproject.com/Articles/1256759/jQuery-DataTable-Integration-Dynamic-columns-and-r

JQuery Datatable (Dynamic columns) populate after Ajax JSON response via server side processing - Using EF Raw SQL query

Logic/Idea: How to Dynamically Bind Jquery DataTables Using Anonymous JSON Result?

How dynamically change column title

table = $('#example').DataTable({...});

$(table.column(1).header()).text('My title');

Sample

https://makitweb.com/datatables-ajax-pagination-with-custom-filter-in-codeigniter/

$(document).ready(function (){
 var table = $('#example').DataTable({
 ajax: {
 url: 'https://api.myjson.com/bins/if7vf',
 dataSrc: function(d){
 if(d.data.length === 0){
 var settings = $('#example').DataTable().settings()[0];
 settings.oLanguage.sEmptyTable = d.message;
 }
 
 return d.data;
 }
 }
 });
});

https://jsfiddle.net/fj5629sx/

<table id="example" class="display" cellspacing="0" width="100%">
 <thead>
 <tr>
 <th>Name</th>
 <th>Position</th>
 <th>Office</th>
 <th>Extn.</th>
 <th>Start date</th>
 <th>Salary</th>
 </tr>
 </thead>
 <tfoot>
 <tr>
 <th>Name</th>
 <th>Position</th>
 <th>Office</th>
 <th>Extn.</th>
 <th>Start date</th>
 <th>Salary</th>
 </tr>
 </tfoot>
</table>

See returned data from Ajax

var table = $("#myTable").DataTable({
    "ajax": {
        "url": "/api/Search",
        "type": "POST",

        // I added this section. It is called before the success callback 
        // You will have to figure out your parsing at this point because 
        // each configuration is different so I just put how mine is.

        dataFilter: function(response){
            var tempData = JSON.parse(response);

            return response;
        }
    },
    "processing": true,
    "serverSide": true,
    "columns": [
        { "data": "id" },
        { "data": "job_id" },
        { "data": "type" },
        { "data": "connection_id" },
        { "data": "company_id" },
        { "data": "message" },
        { "data": "total_completion_time" },
        { "data": "date" },
        { "data": "start_time" },
        { "data": "end_time" },
        { "data": "error_time" }
    ],
    "info": false,
    "searching": false,
    "bLengthChange": false
});