DataTables Performance Issue
Table is slow to render
by Matthew G
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">
<head>
<!-- JQUERY -->
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<!-- BOOTSTRAP -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<!-- JQUERY UI -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<!-- JQUERY DATATABLES -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<!-- MOMENTS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.js"></script>
<!-- DATATABLES MOMENTS -->
<script src="https://cdn.datatables.net/plug-ins/1.10.12/sorting/datetime-moment.js"></script>
<!-- FONTAWESOME -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<!-- DATATABLES - FONTAWESOME -->
<link rel="stylesheet" href="https://cdn.datatables.net/plug-ins/1.10.12/integration/font-awesome/dataTables.fontAwesome.css">
</head>
<body>
<div class="container-fluid...
JavaScript
//MAKE REQUESTED DATE FORMAT RECOGNIZABLE FOR SORTING
$.fn.dataTable.moment('MM/DD/YYYY HH:mm:ss A');
//var dataList = JSON.stringify(getData());
var dataList = getData();
alert(JSON.stringify(dataList));
/*
//INITIALIZE ORDER HISTORY TABLE
$("#OrderHistoryTable").dataTable({
"paging": false,
"ordering": true,
"info": true,
"filter": true,
"length": true,
"processing": true,
"dom": 't<"bottom"if><"clear">',
"scrollY": "200px",
"scrollX": true,
"columnDefs": [
{ "orderData": [], "targets": 0 }, //TURN OFF DEFAULT SORTING OF TABLE
{ "orderable": false, "targets": 0 } //TURN OFF SORTABLILITY FOR COLUMN 1
],
"language": {
"search": "filter:",
"info": " _TOTAL_ items ",
"infoEmpty": "0 items ",
"processing": "<div class='row spinner-icon'><i class='fa fa-spinner fa-5x fa-pulse'></i></div>"
},
"data": dataList,
},
"columns": [
{"data": "Actions"},
{"data": "RequestedDate"},
{"data": "CardNumber"},
{"data": "CardHolder"},
{"data": "ShipAddr1"},
{"data": "ShipAddr2"},
{"data": "City"},
{"data": "State"},
{"data": "Zip"},
{"data": "ShipMethod"},
{"data": "CreatedBy"},
{"data": "Status"}
]
});
*/
function getData()
{
return [{
"Actions": "",
"RequestedDate": "10/20/2016",
"CardNumber": "123456789159483",
"CardHolder": "Jim Doe",
"ShipAddr1": "4532 Blue St",
"ShipAddr2": "",
"City": "Big City",
"State": "New York",
"Zip": "10101",
"ShipMethod": "Regular Mail",
"CreatedBy": "Jane Doe",
"Status": "COMPLETED"
}];
}