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 tableData = getData();
//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": tableData,
"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": "<a href=\"javascript:openViewOnlyScreen(12765, 'ORDER_HISTORY');\"><i class='fa fa-eye'></i></a> <a href=\"javascript:activityLog.getLog(12765);\"><i class='fa fa-file-text-o'></i></a><input type='hidden' name='RequestId' value='12765' >",
"RequestedDate": "11/7/2016 12:57 PM",
"CardNumber": "99994741771",
"CardHolder": "null",
"ShipAddr1": "null",
"ShipAddr2": "null",
"City": "null",
"State": "null",
"Zip": "null",
"ShipMethod": "null",
"CreatedBy": "QV32651",
"Status": "FDR_ZERO_CARDS_ERROR"
},
{
"Actions": "<a href=\"javascript:openViewOnlyScreen(12774, 'ORDER_HISTORY');\"><i class='fa fa-eye'></i></a> <a href=\"javascript:activityLog.getLog(12774);\"><i class='fa...