2. Create 2 text files jquery.dataTables.en-US.txt, jquery.dataTables.zh-CN.txt
3. Go to the url http://datatables.net/plug-ins/i18n
Get the language text and paste it in the relative files.
4. In the masterpage we need to have a hidden control.
5. Store the current language in the hidden field.
hdnLang.Value = SessionProxy.Search.Language.ToLower();6. Get the language in the javascript file
var locale = ($('#ctl00_hdnLang').val() || "en-us");
7. Dynamically change the datatable language filevar langFile = "../Scripts/jquery.dataTables.en-US.txt";
if (locale === "zh-cn") {
langFile = "../Scripts/jquery.dataTables.zh-CN.txt";
}
8. Using it in the scriptvar oTable = $('.gvDataTable').dataTable({
"oLanguage": {
"sUrl": langFile
},
"sScrollX": "99%",
"bStateSave": true, //http://datatables.net/forums/discussion/573/how-to-stay-on-current-page-after-re-draw/p1
"fnDrawCallback": function (oSettings) {/*Re-Create serial no for the table*/
/* Need to redo the counters if filtered or sorted */
if (oSettings.bSorted || oSettings.bFiltered) {
for (var i = 0, iLen = oSettings.aiDisplay.length; i < iLen; i++) {
$('td:eq(0)', oSettings.aoData[oSettings.aiDisplay[i]].nTr).html(i + 1);
}
}
/*Put checkboxlist after filter to show/hide columns after excel export*/
$('.cbShowOrHideGvCols').appendTo('div.DTTT_container');
},
/*"sDom": 'r<"H"lf><"datatable-scroll"t><"F"ip>',*/
"sDom": '<"H"lTfr><"datatable-scroll"t><"F"ip>',
"oTableTools": {
"sSwfPath": "../Scripts/media/swf/copy_csv_xls_pdf.swf",
/*"sSwfPath": "http://datatables.net/release-datatables/extras/TableTools/media/swf/copy_csv_xls_pdf.swf",*/
"aButtons": [{ /*http://datatables.net/extras/tabletools/button_options*/
"sExtends": "xls",
"sFileName": "xlsFileName.xls",
"sButtonText": "
",
"sTitle": "Title of the file"
/*"fnInit": function (node) { formatTableToolsButton(node, 'DTTT_button_xls'); }*/
}
/*, {
"sExtends": "pdf",
//"sButtonText": "
",
"sFileName": "PdfFileName.pdf",
"sTitle": "Title of the file"
}*/
]
}
});
/*When we edit the gridview, header and row are zigzag.
Call this to overcome it
*/
setTimeout(function () {
oTable.fnAdjustColumnSizing();
}, 50);
/*after page load call this event, if there is a postback*/
if ($('.gvShowOrHideGvCols tr').length <= 0) $(".cbShowOrHideGvCols").css("display", "none");
$(".cbShowOrHideGvCols input[type=checkbox]").each(function () {
ToggleGridViewCol('.gvShowOrHideGvCols', this, '');
});
/*when the checkbox checked changed*/
$(".cbShowOrHideGvCols input[type=checkbox]").change(function () {
ToggleGridViewCol('.gvShowOrHideGvCols', this, '');
});
/*Remarks: if we want to show or hide gridview columns
grid: GridView.ClientID
ctrl: CheckBoxList control(if we are using foreach)
colIndex: gridview column index we need to show/hide
someValue: this the attribute added to the checkbox, which holds the checkbox value
*/
function ToggleGridViewCol(grid, ctrl, colIndex) {
var col = (colIndex === '') ?
$(ctrl).parent().attr('someValue') : colIndex;
if (col != '') {
var show = $(ctrl).is(":checked");
if ($(grid + " tr").length <= 0) return true; //check gridview loaded/empty
var oTable = $(grid).dataTable();
var bVis = oTable.fnSettings().aoColumns[col].bVisible;
if (show && !bVis)
oTable.fnSetColumnVis(col, true);
else if (!show && bVis)
oTable.fnSetColumnVis(col, false);
}
}
No comments:
Post a Comment