Tablesorter plugin, json format issue - json

Question

[{"Id":"8082","Date":"2017-12-09 23:40:39"},{"Id":"7825","Date":"2017-12-09 23:40:17"},{"Id":"3138","Date":"2017-12-09 21:58:03"},{"Id":"4805","Date":"2017-12-09 21:25:01"},{"Id":"2570","Date":"2017-12-09 01:08:15"},{"Id":"8733","Date":"2017-12-08 23:53:24"},{"Id":"8733","Date":"2017-12-08 23:53:18"},{"Id":"8733","Date":"2017-12-08 23:53:13"},{"Id":"8733","Date":"2017-12-08 23:53:07"},{"Id":"8733","Date":"2017-12-08 23:53:02"},{"Id":"8733","Date":"2017-12-08 23:52:56"},{"Id":"7825","Date":"2017-12-08 23:40:01"},{"Id":"8733","Date":"2017-12-07 23:53:00"},{"Id":"8733","Date":"2017-12-07 23:52:54"},{"Id":"8733","Date":"2017-12-07 23:52:48"},{"Id":"8733","Date":"2017-12-07 23:52:42"},{"Id":"8733","Date":"2017-12-07 23:52:36"},{"Id":"7832","Date":"2017-12-07 23:43:27"},{"Id":"8082","Date":"2017-12-07 23:40:54"},{"Id":"4805","Date":"2017-12-07 21:24:53"},{"Id":"8733","Date":"2017-12-06 23:52:35"},{"Id":"8733","Date":"2017-12-06 23:52:30"},{"Id":"7832","Date":"2017-12-06 23:43:05"},{"Id":"8082","Date":"2017-12-06 23:40:35"},{"Id":"7825","Date":"2017-12-06 23:40:13"},{"Id":"3841","Date":"2017-12-06 22:56:18"},{"Id":"3765","Date":"2017-12-06 22:38:20"},{"Id":"4805","Date":"2017-12-06 21:24:51"},{"Id":"2570","Date":"2017-12-06 01:08:16"},{"Id":"1397","Date":"2017-12-06 00:09:34"},{"Id":"8733","Date":"2017-12-05 23:52:20"},{"Id":"8733","Date":"2017-12-05 23:52:15"},{"Id":"8733","Date":"2017-12-05 23:52:08"},{"Id":"7832","Date":"2017-12-05 23:42:36"},{"Id":"7825","Date":"2017-12-05 23:39:42"},{"Id":"3138","Date":"2017-12-05 21:56:47"},{"Id":"4805","Date":"2017-12-05 21:24:41"},{"Id":"8291","Date":"2017-12-05 00:11:44"},{"Id":"8291","Date":"2017-12-05 00:11:39"},{"Id":"8291","Date":"2017-12-05 00:11:33"},{"Id":"8291","Date":"2017-12-05 00:11:28"},{"Id":"8291","Date":"2017-12-05 00:11:22"},{"Id":"8291","Date":"2017-12-05 00:11:17"},{"Id":"8291","Date":"2017-12-05 00:11:11"},{"Id":"8291","Date":"2017-12-05 00:11:05"},{"Id":"8291","Date":"2017-12-05 00:11:00"},{"Id":"8291","Date":"2017-12-05 00:10:55"},{"Id":"8291","Date":"2017-12-05 00:10:48"},{"Id":"8291","Date":"2017-12-05 00:10:43"},{"Id":"8291","Date":"2017-12-05 00:10:37"}]
This is the format of the php array outputs in json. I'm trying my best but unfortunately I can't load the data in tablesorter pager.. I have read almost every single stackoverflow topic related to this and Mottie's pager example. The problem I face seems to be the format of the json.
Is it possible to make tablesorter plugin to read through the json file that I have given example of?
In addition I use ajaxurl to load the file ajaxUrl (everything is loaded in the header):
<script type="test/javascript">
$(function(){
// Initialize tablesorter
// ***********************
$("myTable")
.tablesorter({
theme: 'blue',
widthFixed: true,
sortLocaleCompare: true, // needed for accented characters in the data
sortList: [ [0,1] ],
widgets: ['zebra']
})
// initialize the pager plugin
// ****************************
.tablesorterPager({
// **********************************
// Description of ALL pager options
// **********************************
// target the pager markup - see the HTML block below
container: $(".pager"),
// If you want to use ajaxUrl placeholders, here is an example:
// ajaxUrl: "http:/mydatabase.com?page={page}&size={size}&{sortList:col}"
// where {page} is replaced by the page number (or use {page+1} to get a one-based index),
// {size} is replaced by the number of records to show,
// {sortList:col} adds the sortList to the url into a "col" array, and {filterList:fcol}
// the filterList to the url into an "fcol" array.
// So a sortList = [[2,0],[3,0]] becomes "&col[2]=0&col[3]=0" in the url
// and a filterList = [[2,Blue],[3,13]] becomes "&fcol[2]=Blue&fcol[3]=13" in the url
ajaxUrl : 'http://example.com/json.php?paged={page}&{sortList:column}',
// use this option to manipulate and/or add additional parameters to the ajax url
customAjaxUrl: function(table, url) {
// manipulate the url string as you desire
url += '&currPage=' + window.location.pathname;
// trigger a custom event; if you want
$(table).trigger('changingUrl', url);
// send the server the current page
return url;
},
// ajax error callback from $.tablesorter.showError function
// ajaxError: function( config, xhr, settings, exception ){ return exception; };
// returning false will abort the error message
ajaxError: null,
// add more ajax settings here
// see http://api.jquery.com/jQuery.ajax/#jQuery-ajax-settings
ajaxObject: {
type: 'GET', // default setting
dataType: 'json'
},
// process ajax so that the following information is returned:
// [ total_rows (number), rows (array of arrays), headers (array; optional) ]
// example:
// [
// 100, // total rows
// [
// [ "row1cell1", "row1cell2", ... "row1cellN" ],
// [ "row2cell1", "row2cell2", ... "row2cellN" ],
// ...
// [ "rowNcell1", "rowNcell2", ... "rowNcellN" ]
// ],
// [ "header1", "header2", ... "headerN" ] // optional
// ]
// OR
// return [ total_rows, $rows (jQuery object; optional), headers (array; optional) ]
ajaxProcessing: function(data){
if (data && data.hasOwnProperty('rows')) {
var indx, r, row, c, d = data.rows,
// total number of rows (required)
total = data.total_rows,
// array of header names (optional)
headers = data.headers,
// cross-reference to match JSON key within data (no spaces)
headerXref = headers.join(',').replace(/\s+/g,'').split(','),
// all rows: array of arrays; each internal array has the table cell data for that row
rows = [],
// len should match pager set size (c.size)
len = d.length;
// this will depend on how the json is set up - see City0.json
// rows
for ( r=0; r < len; r++ ) {
row = []; // new row array
// cells
for ( c in d[r] ) {
if (typeof(c) === "string") {
// match the key with the header to get the proper column index
indx = $.inArray( c, headerXref );
// add each table cell data to row array
if (indx >= 0) {
row[indx] = d[r][c];
}
}
}
rows.push(row); // add new row array to rows array
}
// in version 2.10, you can optionally return $(rows) a set of table rows within a jQuery object
return [ total, rows, headers ];
}
},
// Set this option to false if your table data is preloaded into the table, but you are still using ajax
processAjaxOnInit: true,
// output string - default is '{page}/{totalPages}';
// possible variables: {size}, {page}, {totalPages}, {filteredPages}, {startRow}, {endRow}, {filteredRows} and {totalRows}
// also {page:input} & {startRow:input} will add a modifiable input in place of the value
output: '{startRow} to {endRow} ({totalRows})',
// apply disabled classname (cssDisabled option) to the pager arrows when the rows
// are at either extreme is visible; default is true
updateArrows: true,
// starting page of the pager (zero based index)
page: 1,
// Number of visible rows - default is 10
size: 50,
// Saves the current pager page size and number (requires storage widget)
savePages: true,
// Saves tablesorter paging to custom key if defined.
// Key parameter name used by the $.tablesorter.storage function.
// Useful if you have multiple tables defined
storageKey: 'tablesorter-pager',
// Reset pager to this page after filtering; set to desired page number (zero-based index),
// or false to not change page at filter start
pageReset: 1,
// if true, the table will remain the same height no matter how many records are displayed.
// The space is made up by an empty table row set to a height to compensate; default is false
fixedHeight: false,
// remove rows from the table to speed up the sort of large tables.
// setting this to false, only hides the non-visible rows; needed if you plan to
// add/remove rows with the pager enabled.
removeRows: false,
// If true, child rows will be counted towards the pager set size
countChildRows: false,
// css class names of pager arrows
cssNext : '.next', // next page arrow
cssPrev : '.prev', // previous page arrow
cssFirst : '.first', // go to first page arrow
cssLast : '.last', // go to last page arrow
cssGoto : '.gotoPage', // page select dropdown - select dropdown that set the "page" option
cssPageDisplay : '.pagedisplay', // location of where the "output" is displayed
cssPageSize : '.pagesize', // page size selector - select dropdown that sets the "size" option
// class added to arrows when at the extremes; see the "updateArrows" option
// (i.e. prev/first arrows are "disabled" when on the first page)
cssDisabled : 'disabled', // Note there is no period "." in front of this class name
cssErrorRow : 'tablesorter-errorRow' // error information row
});
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.29.0/js/extras/jquery.tablesorter.pager.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.29.0/js/jquery.tablesorter.js"></script>
<table id="myTable" class="tablesorter">
<thead>
<tr class="tablesorter-ignoreRow">
<td class="pager" colspan="5">
<img src="../addons/pager/icons/first.png" class="first"/>
<img src="../addons/pager/icons/prev.png" class="prev"/>
<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
<img src="../addons/pager/icons/next.png" class="next"/>
<img src="../addons/pager/icons/last.png" class="last"/>
<select class="pagesize">
<option value="50">50</option>
</select>
</td>
</tr>
<tr>
<th>1</th> <!-- thead text will be updated from the JSON; make sure the number of columns matches the JSON data -->
<th>2</th>
</tr>
</thead>
<tbody> <!-- tbody will be loaded via JSON -->
</tbody>
</table>