Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to change the columns language in datatables 1.9 jquery plugin?

i am using datatables jquery plugin and get settings and data from serverside.but i want to add more then one language in datatables (arabic and english) and also add column title in both these language.

$(document).ready(function() {
var columns;
$.ajax({
        type: "POST",
        url: "./viewController",
        data:{ "TableName" : "ViewGridDept",
        "Call" : "gridConfiguration"},
        dataType:"json",
        success: function(coldata){
        //columns=data.aoColumns;
        //var coldata = eval( '('+data+')' );
        alert(coldata.aoColumnsRef);
        employeeTable = $("#EmployeeTable").dataTable({
        "bJQueryUI" : true,
        "sPaginationType" : "full_numbers",
        "bFilter": true,
        "bInfo": true,
        "bServerSide": true,
        "sAjaxSource" : "./viewController",
        //"aoColumns":coldata.aoColumns ,
        "aoColumnDefs":coldata.aoColumnsRef,
        //"aoColumnDefs":[{"sTitle":"Department Name","mDataProp":"deptName","aTargets":"[1]"},{"sTitle":"Department ID","mDataProp":"deptId","aTargets":"[0]"}],
        "fnServerData": function ( sSource, aoData, fnCallback ) {
            aoData.push( { "name" : "TableName", "value" : "ViewGridDept" },
            { "name" : "Call", "value" : "Data" } );
            $.ajax( {
                    "dataType": 'json', 
                    "type": "POST", 
                    "url": sSource, 
                    "data": aoData, 
                    "success": fnCallback
                    } );}

});
        }});

this is how i get my settings and data .

my question is how to change language of my data table especially for columns header?

like image 455
Usman Hayat Khan Avatar asked Aug 30 '13 07:08

Usman Hayat Khan


1 Answers

Regarding the columns : Why do you want DataTables to take care of the table <th> captions clientside? Can't you do that serverside, where I guess you already know the user language - and where you build the <table>-skeleton anyway?

Regarding the DataTables internal strings, like First Next Showing 1 to 10 of 57 entries and so on, just create a file with arabic translation, like this

{
    "sProcessing":   "جاري التحميل...",
    "sLengthMenu":   "أظهر مُدخلات _MENU_",
    "sZeroRecords":  "لم يُعثر على أية سجلات",
    "sInfo":         "إظهار _START_ إلى _END_ من أصل _TOTAL_ مُدخل",
    "sInfoEmpty":    "يعرض 0 إلى 0 من أصل 0 سجلّ",
    "sInfoFiltered": "(منتقاة من مجموع _MAX_ مُدخل)",
    "sInfoPostFix":  "",
    "sSearch":       "ابحث:",
    "sUrl":          "",
    "oPaginate": {
        "sFirst":    "الأول",
        "sPrevious": "السابق",
        "sNext":     "التالي",
        "sLast":     "الأخير"
    }
}

call it arabic.txt and add this to your dataTable() initialization above :

..

oLanguage: { "sUrl": "path-to-your-translation-file/arabic.txt" },

..

There is [ as you may guess :-) ] already made an arabic translation you can find here http://www.datatables.net/plug-ins/i18n

like image 81
davidkonrad Avatar answered Oct 11 '22 16:10

davidkonrad