jquery - Datatables change language dynamically

1. Consider we need both chinese and english
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.

view plaincopy to clipboardprint?

1. <input type="hidden" id="hdnLang" runat="server">  

5. Store the current language in the hidden field.

view plaincopy to clipboardprint?

1. hdnLang.Value = SessionProxy.Search.Language.ToLower();  

hdnLang.Value = SessionProxy.Search.Language.ToLower();

6. Get the language in the javascript file

view plaincopy to clipboardprint?

1. var locale = ($('#ctl00_hdnLang').val() || "en-us");  

var locale = ($('#ctl00_hdnLang').val() || "en-us");

7. Dynamically change the datatable language file

view plaincopy to clipboardprint?

1. var langFile = "../Scripts/jquery.dataTables.en-US.txt";  
2. if (locale === "zh-cn") {  
3. langFile = "../Scripts/jquery.dataTables.zh-CN.txt";  
4. }  

var langFile = "../Scripts/jquery.dataTables.en-US.txt";
if (locale === "zh-cn") {
langFile = "../Scripts/jquery.dataTables.zh-CN.txt";
}

8. Using it in the script

view plaincopy to clipboardprint?

1. var oTable = $('.gvDataTable').dataTable({  
2.     "oLanguage": {  
3.         "sUrl": langFile  
4.     },  
5.     "sScrollX": "99%",  
6.     "bStateSave": true, //http://datatables.net/forums/discussion/573/how-to-stay-on-current-page-after-re-draw/p1  
7.     "fnDrawCallback": function (oSettings) {/*Re-Create serial no for the table*/  
8.         /* Need to redo the counters if filtered or sorted */  
9.         if (oSettings.bSorted || oSettings.bFiltered) {  
10.             for (var i = 0, iLen = oSettings.aiDisplay.length; i < iLen; i++) {  
11.                 $('td:eq(0)', oSettings.aoData[oSettings.aiDisplay[i]].nTr).html(i + 1);  
12.             }  
13.         }  
14.          /*Put checkboxlist after filter to show/hide columns after excel export*/  
15.         $('.cbShowOrHideGvCols').appendTo('div.DTTT_container');   
16.     },  
17.     /*"sDom": 'r<"H"lf><"datatable-scroll"t><"F"ip>',*/  
18.     "sDom": '<"H"lTfr><"datatable-scroll"t><"F"ip>',  
19.     "oTableTools": {  
20.         "sSwfPath": "../Scripts/media/swf/copy_csv_xls_pdf.swf",  
21.         /*"sSwfPath": "http://datatables.net/release-datatables/extras/TableTools/media/swf/copy_csv_xls_pdf.swf",*/  
22.         "aButtons": [{ /*http://datatables.net/extras/tabletools/button_options*/  
23.                 "sExtends": "xls",  
24.                 "sFileName": "xlsFileName.xls",  
25.                 "sButtonText": "<img alt="" height="15" src="../images/excel.gif" width="10">",  
26.                 "sTitle": "Title of the file"  
27.                 /*"fnInit": function (node) { formatTableToolsButton(node, 'DTTT_button_xls'); }*/  
28.             }  
29.             /*, { 
30. "sExtends": "pdf", 
31. //"sButtonText": "<img alt="" height="15" src="../images/pfp.jpg" style="border:none;" width="10">", 
32. "sFileName": "PdfFileName.pdf", 
33. "sTitle": "Title of the file" 
34. }*/  
35.         ]  
36.     }  
37. });  
38.   
39. /*When we edit the gridview, header and row are zigzag. 
40. Call this to overcome it 
41. */  
42. setTimeout(function () {  
43.     oTable.fnAdjustColumnSizing();  
44. }, 50);  
45.   
46. /*after page load call this event, if there is a postback*/  
47. if ($('.gvShowOrHideGvCols tr').length <= 0) $(".cbShowOrHideGvCols").css("display", "none");  
48. $(".cbShowOrHideGvCols input[type=checkbox]").each(function () {  
49.     ToggleGridViewCol('.gvShowOrHideGvCols', this, '');  
50. });  
51.   
52. /*when the checkbox checked changed*/  
53. $(".cbShowOrHideGvCols input[type=checkbox]").change(function () {  
54.     ToggleGridViewCol('.gvShowOrHideGvCols', this, '');  
55. });  
56.   
57. /*Remarks: if we want to show or hide gridview columns 
58.   grid: GridView.ClientID 
59.   ctrl: CheckBoxList control(if we are using foreach) 
60.   colIndex: gridview column index we need to show/hide 
61.   someValue: this the attribute added to the checkbox, which holds the checkbox value 
62.   */  
63. function ToggleGridViewCol(grid, ctrl, colIndex) {  
64.     var col = (colIndex === '') ?  
65.         $(ctrl).parent().attr('someValue') : colIndex;  
66.   
67.     if (col != '') {  
68.         var show = $(ctrl).is(":checked");  
69.         if ($(grid + " tr").length <= 0) return true; //check gridview loaded/empty  
70.         var oTable = $(grid).dataTable();  
71.         var bVis = oTable.fnSettings().aoColumns[col].bVisible;  
72.   
73.         if (show && !bVis)  
74.             oTable.fnSetColumnVis(col, true);  
75.         else if (!show && bVis)  
76.             oTable.fnSetColumnVis(col, false);  
77.     }  
78. }  

var 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);
    }
}