CODEWITHSUNDEEP
jquerycssdatatables
Ricardo Ruwer
Ricardo Ruwer

Reputation: 589

DataTables Plugin - Align buttons to the right

I'm using this plugin: https://www.datatables.net/

I have a table listing all the news of the website, with: date, title, status and some actions (add, edit, delete), see here: add news

And I want to put all those buttons aligned to the right. Exactly like that: yeah baby

(I just have this result because i edited on photoshop)

How can I do that? I tried with some "align right" but it doesn't work like i want...

Can someone help me? :)

My code:

$('#datatable').dataTable( {
    "aaSorting": [],
    "oLanguage": {
        "sInfo": "<b>_TOTAL_</b> resultados encontrados"
    },
});

Upvotes: 3

Views: 7680

Answers (1)

davidkonrad
davidkonrad

Reputation: 85538

The trick is to set autoWidth to false, and define columns so the "button column" has a fixed width and the other columns a relative percent width close to 100%. It is important to avoid wordwrapping in the button column too. Example

td.buttons {
   white-space: nowrap;
}

var table = $('#example').dataTable({
    autoWidth: false,
    columns : [
        { width: '50%' },
        { width: '40%' },
        { width: '100px', class : 'buttons' }
   ]     
})

small demo (OP has not provided an example) -> http://jsfiddle.net/pebmuu4w/

NB: I assume you are using 1.10.x since you are just referring to dataTables in general. If not the above options is named bAutoWidth, aoColumns, sWidth and sClass.

Upvotes: 2

Related Questions