2024-05-29 15:55:14 +08:00
|
|
|
|
$(document).ready(function() {
|
2024-05-29 15:25:17 +08:00
|
|
|
|
setTimeout(function() {
|
|
|
|
|
// [ Ajax Data Source (Arrays) ]
|
|
|
|
|
$('#dt-ajax-array').DataTable({
|
2024-05-29 15:40:26 +08:00
|
|
|
|
"ajax": "static/plugins/data-tables/json/dt-json-data/arrays.txt"
|
2024-05-29 15:25:17 +08:00
|
|
|
|
});
|
|
|
|
|
// [ Ajax Data Source (Objects) ]
|
|
|
|
|
$('#dt-ajax-object').DataTable({
|
2024-05-29 15:40:26 +08:00
|
|
|
|
"ajax": "static/plugins/data-tables/json/dt-json-data/objects.txt",
|
2024-05-29 15:25:17 +08:00
|
|
|
|
"columns": [{
|
|
|
|
|
"data": "name"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"data": "position"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"data": "office"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"data": "extn"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"data": "start_date"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"data": "salary"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
});
|
|
|
|
|
// [ Nested Object Data (objects) ]
|
|
|
|
|
$('#dt-nested-object').DataTable({
|
|
|
|
|
"processing": true,
|
2024-05-29 15:40:26 +08:00
|
|
|
|
"ajax": "static/plugins/data-tables/json/dt-json-data/objects_deep.txt",
|
2024-05-29 15:25:17 +08:00
|
|
|
|
"columns": [{
|
|
|
|
|
"data": "name"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"data": "hr.position"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"data": "contact.0"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"data": "contact.1"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"data": "hr.start_date"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"data": "hr.salary"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
});
|
|
|
|
|
// [ Orthogonal Data ]
|
|
|
|
|
$('#dt-orthogonal').DataTable({
|
2024-05-29 15:40:26 +08:00
|
|
|
|
ajax: "static/plugins/data-tables/json/dt-json-data/orthogonal.txt",
|
2024-05-29 15:25:17 +08:00
|
|
|
|
columns: [{
|
|
|
|
|
data: "name"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
data: "position"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
data: "Office"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
data: "extn"
|
|
|
|
|
}, {
|
|
|
|
|
data: {
|
|
|
|
|
_: "start_date.display",
|
|
|
|
|
sort: "start_date.timestamp"
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
data: "salary"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
});
|
|
|
|
|
// [ Generated Content For A Column ]
|
|
|
|
|
var generatetable = $('#dt-generate-content').DataTable({
|
2024-05-29 15:40:26 +08:00
|
|
|
|
"ajax": "static/plugins/data-tables/json/dt-json-data/arrays.txt",
|
2024-05-29 15:25:17 +08:00
|
|
|
|
"columnDefs": [{
|
|
|
|
|
"targets": -1,
|
|
|
|
|
"data": null,
|
|
|
|
|
"defaultContent": "<button>Click!</button>"
|
|
|
|
|
}]
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
$('#dt-generate-content tbody').on('click', 'button', function() {
|
|
|
|
|
var data = generatetable.row($(this).parents('tr')).data();
|
|
|
|
|
alert(data[0] + "'s salary is: " + data[5]);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// [ Deferred Rendering For Speed ]
|
|
|
|
|
$('#dt-render').DataTable({
|
2024-05-29 15:40:26 +08:00
|
|
|
|
"ajax": "static/plugins/data-tables/json/dt-json-data/arrays.txt",
|
2024-05-29 15:25:17 +08:00
|
|
|
|
"deferRender": true
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
}, 350);
|
|
|
|
|
});
|