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

Nicola Peluchetti · Accepted Answer · 2012-01-02 13:47:53Z

10

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

edited Jan 2, 2012 at 13:47

answered Jan 2, 2012 at 13:42

Nicola Peluchetti

77k32 gold badges150 silver badges197 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Vasanthan.R.P Over a year ago

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

Nicola Peluchetti Over a year ago

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

Irmantas · Accepted Answer · 2012-01-02 13:55:16Z

0

You cannot append DIV elements to TABLE body! You have to create new TR element change all DIV's to TD and then append them to TR element ant then append TR element to TABLE body.

UPDATE DIV element has no attribute align, you have to use CSS for this.

edited Jan 2, 2012 at 13:55

answered Jan 2, 2012 at 13:40

Irmantas

861 silver badge9 bronze badges

2 Comments

Vasanthan.R.P Over a year ago

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 Over a year ago

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

Allan Jardine · Accepted Answer · 2012-01-02 22:40:22Z

0

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

As you have HMTL in that column, DataTables will automatically detect it as type 'string' and sort it accordingly. If you want it to sort numerically, stripping the HTML data, use this plug-in: http://datatables.net/plug-ins/sorting#numbers_html

answered Jan 2, 2012 at 22:40

Allan Jardine

5,5315 gold badges33 silver badges34 bronze badges

Collectives™ on Stack Overflow

Jquery Datatables Ajax method cell alignment

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related