Question

I am displaying the database table values using data tables. I am doing this using the ajax method. Here is the code

$('#example1').dataTable( {
                "bProcessing": true,
                "sAjaxSource": "filename.php",
                "bJQueryUI": true,
                "sPaginationType": "full_numbers"

            } );

The output of the filename.php is

{ "aaData": [["1","<input type='checkbox' name='user'>&nbsp;Test Name","Leader","35"]] } 

The html code is

<table cellpadding="0" cellspacing="0" border="0" class="display tablehead" id="example1">
              <thead>
                  <tr class="colhead newbg">
                    <th width="17" align="center">No</th>
                    <th width="194" align="left">User</th>
                    <th width="56" align="left">Role</th>
                    <th width="31" align="right">AGE</th>  
                  </tr>
                  </thead>
                    <tbody>

                    </tbody>
              </table>

In the above html you can see the first column is center aligned and the next two columns are left aligned and the last one is right aligned. But in the data out put all are center aligned. I tried to use the following

{ "aaData": [["<div align='center'>1</div>","<div align='left'><input type='checkbox' name='user'>&nbsp;Test Name</div>","<div align='center'>Leader</div>","<div align='right'>35</div>"]] } 

Now i got the correct display but while sorting by age it is not correct. Please help. Thanks

Answer 1

I think you should do something like (use aoColumns):

$('#example1').dataTable( {
                "bProcessing": true,
                "sAjaxSource": "filename.php",
                "bJQueryUI": true,
                "sPaginationType": "full_numbers",
            "aoColumns": [ 
                        {"sClass": "center"},
                        {"sClass": "left"},
                        {"sClass": "left"},
                        {"sClass": "right"},

            } );

And then define the correct CSS classes

.right{
  align: right;
}

.left{
  align: left;
}

.center{
  align: center;
}

In this way datatables handles appending the classes to the elements and the sorting works correctly. Of course use the first JSON