Server side paging and complex header

alkingson

Hi,
I am using data table and its awesome tool.
I have one question:
I am using datatable with complex header with rowspan
It was fairly simple I make a ajax call and create HTML table on client side using javascript and then define Datatable.
This is my complex table header:
Company NameType / LevelIDCountryRegion# of OfficesHugeSmallMordenTinyDuplex
This is my code to create datatable
[code]
oTable1 = $('#SearchTable').dataTable({
bSort: false,
bPaginate: false,
bLengthChange: false,
bFilter: true,
bSort: true,
bInfo: false,
bDestroy: true,
bJQueryUI: true,
bAutoWidth: false,
aoColumns: colDef,
oLanguage: {
sEmptyTable: "No results found"
},
aaSorting: [],
sDom: 't'
});

[/code]
Now I have a new requirement where I have to do server side paging. Any idea how to have predefined HTML with server side paging. I want to get 50 records at any given time. User search might have 5000 records but I want to bring 50 records at each click. I was able to achieve it with normal header like below. But now since I have to use fnServerData how do I define complex html header?
[code]
var oTable1 = null;
oTable1 = $('#SearchTable').dataTable({
bLengthChange: false,
bFilter: true,
bSort: true,
bServerSide: true,
bDestroy: true,
bProcessing: true,
sPaginationType: "full_numbers",
iDisplayLength: 50,
bJQueryUI: false,
bAutoWidth: false,
sAjaxSource: "/WebService/WebServiceSvc.asmx/CompanySearch",
//aaData: results,
aoColumns: colDef,

oLanguage: {
sEmptyTable: "No results found"
},
aaSorting: [],
fnServerData: function (sSource, aoData, fnCallback) {
inputParameterForDialogAsJson.searchString = $("#" + strTextBoxName).val(); ;
inputParameterForDialogAsJson.iPageStart = aoData[3].value;
inputParameterForDialogAsJson.iPageLen = "50";
inputParameterForDialogAsJson.sEcho = aoData[0].value;

var jsonsenddata = JSON.stringify(inputParameterForDialogAsJson);

$.ajax({
dataType: 'json',
contentType: 'application/json',
type: 'POST',
url: sSource,
//jsonurl = strBaseUrl + strMethodURL;

data: jsonsenddata,
success: function (data) { if (data.d == 'Error') ErrorHandler(); else if (data.d == '') ErrorHandler(); else { fnCallback($.parseJSON(data.d)); } },
failure: function (errMsg) {
ErrorHandler();
}

});

}

});
[/code]

allan

I'm not sure I understand what would cause your original method to not work with server-side processing I'm afraid. Can you link to the page please?

DataTables can't generate "complex" headers itself, but there should be no reason why you can't use colspan / rowspan in a header when using server-side processing if you put the HTML into place.

Allan

alkingson

Hi Allan,
Thank you so much for replying.
Can you please let me know how can I define HTML in later example? Since fnServerData has fnCallback which takes Json and render table from that Json. How and where do I define HTML headers in such case?

Thanks,
Alkingson

allan

What you would need to do is define the table before you initialise the DataTable - not in fnServerData . You'd need to make an Ajax call to get the header information and then draw it, followed by initialising the table. Alternatively, also get your data in your Ajax call and then pass it to the DataTable as aaData when initialising it - saving an Ajax call.

Allan

alkingson

Hi Alan,
I got your point and I want to do same thing. But my problem is when user clicks on page 2 or last button of data tables paging control that information is stored in aoData. How can I access that without using fnServerData?
Thanks once again for your help.

alkingson

If you see my 2nd example I am using aodata array available in fnServerData to get value of sEcho and iPageStart. How can I get that information in my predefined Ajax call.
Thanks,
Alkingson

allan

> How can I access that without using fnServerData?

Using the `xhr` event: http://datatables.net/docs/DataTables/1.9.4/#xhr

Allan

alkingson

I will to use xhr but how can I have HTML header and rest of the data in Json since datatable is expecting certain format of Json for paging. Example {
"sEcho": 3,
"iTotalRecords": 57,
"iTotalDisplayRecords": 57,
"aaData": [
[
"Gecko",
"Firefox 1.0",
"Win 98+ / OSX.2+",
"1.7",
"A"
],
[
"Gecko",
"Firefox 1.5",
"Win 98+ / OSX.2+",
"1.8",
"A"
],
...
]
}

alkingson

Nevermind I got it I have to specify in aaData. Thank you so much I will soon share my code might be helpful so someone else.

alkingson

Thank you so much Alan below is my code I created SearchTable added columns with Row and Col span and then render table using datatables worked perfect.
[code]
if (boolFormatControl) {
$('#SearchTable').addClass("table table-bordered table-striped table-hover table-condensed").attr('style', 'width:100%');
}

$(strHtmlColumnDef).appendTo(table);


var oTable1 = $('#SearchTable').dataTable({
bLengthChange: false,
bFilter: true,
bSort: true,
bServerSide: true,
bDestroy: true,
bProcessing: true,
sPaginationType: "full_numbers",
iDisplayLength: 50,
bJQueryUI: false,
bAutoWidth: false,
sAjaxSource: "/WebService/WebSvc.asmx/SearchInternal",
aoColumns: colDef,
fnRowCallback: function (nRow, aData, iDisplayIndex) { $("td:eq(0)", nRow).html($('').text(aData.Name).attr("class", "a_Name").attr("CallBackData", JSON.stringify(aData)).attr("href", "javascript:void(0)").append($('').attr("class", "a_Name").attr("CallBackData", JSON.stringify(aData)).attr("href", "javascript:void(0)"))); return nRow; },

oLanguage: {
sEmptyTable: "No results found"
},
aaSorting: [],
fnServerData: function (sSource, aoData, fnCallback) {
inputParameterForDialogAsJson.searchString = $("#" + strTextBoxName).val();
inputParameterForDialogAsJson.iPageStart = aoData[3].value;
inputParameterForDialogAsJson.iPageLen = "50";
inputParameterForDialogAsJson.sOrderBy = "";

inputParameterForDialogAsJson.sGeography = "";
inputParameterForDialogAsJson.sPriority = "";

inputParameterForDialogAsJson.sEcho = aoData[0].value;


var jsonsenddata = JSON.stringify(inputParameterForDialogAsJson);

$.ajax({
dataType: 'json',
contentType: 'application/json',
type: 'POST',
url: sSource,


data: jsonsenddata,
success: function (data) { if (data.d == 'Error') ErrorHandler(); else if (data.d == '') ErrorHandler(); else { fnCallback($.parseJSON(data.d)); } },
failure: function (errMsg) {
ErrorHandler();
}
});
}
});
[/code]