Initialise Datatables with iDisplayLength value retrieved by AJAX
Initialise Datatables with iDisplayLength value retrieved by AJAX
I'm trying to setup some datatables where the default number of records to display ('iDisplayLength') can/may change each time a table is initialised. More specifically, each authenticated user (ASP.net MVC) in my project can have a different default 'iDisplayLength' value which is held in a MySQL table/Session variable.
I have some working code to do just this which uses a static (hard coded) 'iDisplayLength' value of 10 at first and then the 'fnLengthChange' function to update this once the AJAX call has finished retrieving the required 'iDisplayLength' value.
This works fine, but the unsurprisingly, the AJAX source is called twice. Once for the first initialisation with 'iDisplayLenth' of 10, and then again when the required 'iDisplayLength' value has been retrieved and the 'fnLengthChange' function called.
The AJAX call retrieving the values:
[code]function getSettingByName(name, value, fnCallback) {
var request = $.ajax({
url: "/Setting/GetValue",
type: "POST",
data: {
name: name,
value: value
},
dataType: "json"
});
// Success
request.done(function (data) {
if (data != false) {
fnCallback(data.value);
}
});
request.fail(function (data, status, err) {
fnCallback(value);
});
}; [/code]
Callback function to update the datatable with the required iDisplayLength:
[code]function displayLengthUpdate(value) {
intDisplayLength = parseInt(value);
if (oTable_SubmissionOverview.length > 0) {
oTable_SubmissionOverview.fnLengthChange(intDisplayLength);
}
};[/code]
The datatable initialisation code:
[code]var oTable_SubmissionOverview = $('#dt_SubmissionOverview').dataTable({
"bServerSide": true,
"sAjaxSource": "/Submission/AjaxOverview",
"sDom": "<'row-fluid'<'span6'lT><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
"aoColumns": [...CODE OMITTED FOR SIMPLICITY...],
"fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {...CODE OMITTED FOR SIMPLICITY...},
"fnDrawCallback": displayLengthChanged,
"oTableTools": {...CODE OMITTED FOR SIMPLICITY...}
});[/code]
(NOTE. displayLengthChanged is a function to save the iDisplay length if it is changed by the user using the built in dropdown box).
Last line of javascript which runs post datatable initialisation and kicks off the AJAX function:
[code]getSettingByName("Datatable_Length", intDisplayLength_Default, displayLengthUpdate);[/code]
My question is, is there any way I can effectively halt the initialisation of the datatable until the iDisplayLength value has been retreived by the AJAX call so that only one AJAX source call is made when the page is first loaded?
Any help or suggestions is much appreciated!!
I have some working code to do just this which uses a static (hard coded) 'iDisplayLength' value of 10 at first and then the 'fnLengthChange' function to update this once the AJAX call has finished retrieving the required 'iDisplayLength' value.
This works fine, but the unsurprisingly, the AJAX source is called twice. Once for the first initialisation with 'iDisplayLenth' of 10, and then again when the required 'iDisplayLength' value has been retrieved and the 'fnLengthChange' function called.
The AJAX call retrieving the values:
[code]function getSettingByName(name, value, fnCallback) {
var request = $.ajax({
url: "/Setting/GetValue",
type: "POST",
data: {
name: name,
value: value
},
dataType: "json"
});
// Success
request.done(function (data) {
if (data != false) {
fnCallback(data.value);
}
});
request.fail(function (data, status, err) {
fnCallback(value);
});
}; [/code]
Callback function to update the datatable with the required iDisplayLength:
[code]function displayLengthUpdate(value) {
intDisplayLength = parseInt(value);
if (oTable_SubmissionOverview.length > 0) {
oTable_SubmissionOverview.fnLengthChange(intDisplayLength);
}
};[/code]
The datatable initialisation code:
[code]var oTable_SubmissionOverview = $('#dt_SubmissionOverview').dataTable({
"bServerSide": true,
"sAjaxSource": "/Submission/AjaxOverview",
"sDom": "<'row-fluid'<'span6'lT><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
"aoColumns": [...CODE OMITTED FOR SIMPLICITY...],
"fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {...CODE OMITTED FOR SIMPLICITY...},
"fnDrawCallback": displayLengthChanged,
"oTableTools": {...CODE OMITTED FOR SIMPLICITY...}
});[/code]
(NOTE. displayLengthChanged is a function to save the iDisplay length if it is changed by the user using the built in dropdown box).
Last line of javascript which runs post datatable initialisation and kicks off the AJAX function:
[code]getSettingByName("Datatable_Length", intDisplayLength_Default, displayLengthUpdate);[/code]
My question is, is there any way I can effectively halt the initialisation of the datatable until the iDisplayLength value has been retreived by the AJAX call so that only one AJAX source call is made when the page is first loaded?
Any help or suggestions is much appreciated!!
This discussion has been closed.
Replies
Yes - use Sjax (synchronous) by setting 'async: false' for jQuery's Ajax call that you make.
Or better yet, make the DataTables init a function that gets callback when the parameter is obtained. This is much better because Sjax will freeze the Javascript completely, and if your server takes a while to respond your user might what what is going on.
Allan