How can i configure Jquery DataTable to not load all content on first load
e.g if i have 1000 records, DataTable will load all in first load this can be heavy though. how about loading each content when click on pagination part? Like This
$(document).ready( function () {
$('#example').dataTable( {
"bServerSide": true,
"sAjaxSource": "xhr.php"
} );
} );
There is ServerSide configuration for alike pagination please let me know, if my question is duplicate just shout out.
Use the "deferLoading" attribute:
https://datatables.net/examples/server_side/defer_loading.html
Check here full jquery example
jquery-datatable-ajax-tutorial-with-example
var studentTable;
jQuery(document).ready(function() {
studentTable = jQuery("#studentListTable").dataTable({
"bJQueryUI" : true,
"sPaginationType" : "full_numbers",
"bRetrieve" : true,
"bFilter" : true,
"iDisplayLength": 10,
"bProcessing" : true,
"bServerSide" : false,
"aoColumns" : [ { "bSearchable" : false,"bVisible" : false,
"asSorting" : [ "asc" ] },
{"sWidth" : "20%","bSortable" : true },
{"sWidth" : "20%","bSortable" : true },
{"sWidth" : "20%","bSortable" : true },
{"sWidth" : "20%","bSortable" : true },
{"sWidth" : "20%","bSortable" : true }
]
});
jQuery(".ui-corner-br").addClass("ui-widget-header_custom");
});
Related
var table = $('#canidateregtable').DataTable();
table.destroy();
$('#canidateregtable').DataTable( {
serverSide: true,
"ajax": {
"url" : "getdata",
"dataSrc" : "",
},
});
This is my datatable and some column like
"columns": [
{"data": "user_id",}
]
Why this error can anyone help me and this is in live in server
Setting attribute of Datatable differs from version of datatable js you are using.
If you are using Datatable version of greater than 1.10.0 use below syntax.
$('#canidateregtable').DataTable({
"sAjaxSource": "/GetData", // Your url
"bServerSide": true,
"bSearchable": true,
"order": [[1, 'asc']],
"columns": [
// You can mention here all your columns you want to display
{
"data": "Name",
}
]
});
}
On version 1.3.3 of the owl carousel how can I load all available images so that I dont have to hit the right arrow to load more. I want them to all be loaded so there is no jump when I scroll.
I dont see an option to load all instead of swiping through4 and having to reload with clicking the arrow.
$.fn.owlCarousel.options = {
items : 5,
itemsCustom : false,
itemsDesktop : [1199, 4],
itemsDesktopSmall : [979, 3],
itemsTablet : [768, 2],
itemsTabletSmall : false,
itemsMobile : [479, 1],
singleItem : false,
itemsScaleUp : false,
slideSpeed : 200,
paginationSpeed : 800,
rewindSpeed : 1000,
autoPlay : false,
stopOnHover : false,
navigation : false,
navigationText : ["prev", "next"],
navigationMargin : 0,
rewindNav : true,
scrollPerPage : false,
pagination : true,
paginationNumbers : false,
responsive : true,
responsiveRefreshRate : 200,
responsiveBaseWidth : window,
baseClass : "owl-carousel",
theme : "owl-theme",
lazyLoad : false,
lazyFollow : true,
lazyEffect : "fade",
autoHeight : false,
jsonPath : false,
jsonSuccess : false,
dragBeforeAnimFinish : true,
mouseDrag : true,
touchDrag : true,
addClassActive : false,
transitionStyle : false,
beforeUpdate : false,
afterUpdate : false,
beforeInit : false,
afterInit : false,
beforeMove : false,
afterMove : false,
afterAction : false,
startDragging : false,
afterLazyLoad: false
};
Try setting lazyFollow to false as well:
...
lazyLoad : false,
lazyFollow : false, // <<<--
...
A jQuery table is initialized from jSON
I know that it will be only one row, so I do not need to show the next/previous tabs after the table. Nevertheless they are displayed.
Is there any way of removing them?
The code for the table:
table = $("#retrievedTable").dataTable({
"bServerSide" : true,
"sAjaxSource" : "/cm/credit/getretrievedTable.json",
"fnServerParams": function ( aoData ) {
aoData.push( { "name": "orderNumber", "value": $( "#orderNumberInput" ).val() } );
},
"bProcessing" : true,
"bInfo" : false,
"bRetrieve" : true,
"bDestroy" : true,
"bAutoWidth": false,
"bLengthChange": false,
"iDisplayLength": 20,
"aoColumnDefs": [{
"mRender": function ( data, type, row ) {
return moment(data).format("MM/DD/YYYY");
},
"aTargets": [ 0 ],
"bPaginate": false
}]
});
The only answer I can come up with is to hide it instead of removing it. You can do this by adding this to your css:
.dataTables_paginate {
display: none;
}
I've tried it with the example on the website. The css class was found on this page.
How to bind dynamic JSON object to jquery data table. Did anyone worked on such scenario.
For example,
var objTable = jQuery.parseJSON(result);
if objTable != null && objTable .length > 0) {
$('#tblName').dataTable({
"bDestroy": true,
"bScrollCollapse": true,
"bJQueryUI": true,
"bPaginate": false,
"sScrollY": "310px",
"bInfo": true,
"bFilter": true,
"bSort": true,
"aaData": objTable,
"aoColumns": [
{ "mData": "Field1" },
{ "mData": "Field2" },
{ "mData": "Field3" },
.
.
.
.
{ "mData": "FieldN" }] //These are dynamically created columns present in JSON object.
});
}
Its possible to add the data to datatable dynammically
Like this
$('#YourTableID').dataTable().fnAddData([sno,msg.json[i].unit_id,msg.jsoni].date_time,msg.json[i].sms_number,msg.json[i].message]);
Befor that you have 5 headers in table for appending above
I have the following code which shows all rows by default and when clicking the .view-unread-rows button the datatable should only show unread rows. However, it does not appear to be running the reload query.
$(".view-unread-rows").click( function(e) {
e.preventDefault();
message_table.fnReloadAjax("/letters/ajax/T");
message_table.fnDraw();
});
$(".view-all-rows").click( function(e) {
e.preventDefault();
message_table.fnReloadAjax("/letters/ajax/F");
message_table.fnDraw();
});
message_table = $('.message_table').dataTable({
"sPaginationType": "bootstrap",
"iDisplayLength": 10,
"iDisplayStart": 0,
"bProcessing": true,
"bServerSide": true,
"sServerMethod": "POST",
"sAjaxSource": "/letters/ajax/F",
"sDom": '<"top">rt<"bottom"><"clear">',
"aaSorting": [[3, 'desc']],
"aoColumns": [
{ "bSortable": false },
{ "bSortable": true },
{ "bSortable": false },
{ "bSortable": true }
],
"oLanguage": {
"sEmptyTable": "No results"
}
});
I have had this working but I've changed something at some point and it's now stopped. Any ideas?
EDIT:
OK, oddly enough, this seems to work fine if there are no results for clicking on .view-unread-rows.
Still no clue though.
$(this).on('click', '.view-unread-rows', function(e) { ...