Jquery Datatables Ajax method cell alignment

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

Solution

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

Comments

[Vasanthan.R.P]

as per data tables these elements will be placed inside tds automatically i hope. So i need a way to align them. Thanks

[Nicola Peluchetti]

he can do that, but if he does that sorting won't work (unless he strips out the html. I think you can use classes to do what he want through datatables API

[Vasanthan.R.P]

Great. I will try this one and let you know. Thanks

[Nicola Peluchetti]

@Vasanthan.R.P i also posted a link where you can find the docs for aoColumns