DataTables multiple styles on multiple tables in one page

Question

I am new to datatables and needed to get mutliple datatables working in the same page I found a online JSBIN of the multiple tables so i can play around with the styling..

Here is the forked JSBIN demo http://jsbin.com/qawota/1/edit

I am trying to have multiple styles applied to the diffrent headers of the tables. For example the inner most table i would like to change the headings to have colored backgrounds etc.. anything to make it look diffrent so it is not confusing to people using the table

I have given the inner table an id of example1 and a class of innerDataTable but in the css writing something like .innerDataTable or trying to select with the id has no effect.

Thanks

just need more specific rules like table table th{..} Won't affect the top level table — charlietfl
– charlietfl, Commented Oct 12, 2014 at 12:45
Hmm I am trying more specific rules but i can't seem to get the selector quite right, could you show me in the JSBIN I am trying something like innerDataTable.table.datatable — Sevren
– Sevren, Commented Oct 12, 2014 at 13:26

emmanuel · Accepted Answer · 2014-10-12 12:45:00Z

1

You could use Jquery .css() to change css styling of the page.

I have updated your example adding a button that onClick changes heading background.

Html:

<a id="change_style" onClick="change_style();">Change style</a>

Js:

function change_style() { 
  $('#example tr[role="row"]').css('background','red');
}

JSBin: http://jsbin.com/forenisedevu/1/edit

edited Oct 12, 2014 at 12:45

answered Oct 12, 2014 at 12:28

emmanuel

9,61310 gold badges27 silver badges38 bronze badges

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

3 Comments

Sevren Over a year ago

hmm that applies it to all of the tables, i just want to try and target the inner most one.. with the id=example1 and class innerDataTable. Modifying your JSBIN with the updated id does not seem to work

emmanuel Over a year ago

The problem is that #example1 doesn't appended to the code. If you add the id / class to the tr / th it works just fine. It's because table id created in the js code function fnFormatDetails() / function fnFormatDetails1(). You have to alter these functions to make it work.

Sevren Over a year ago

Thanks! i just need to select: the following $('#doubleinner'+iPos+'_'+jPos+'tr[role="row"]').css('background','red');

Collectives™ on Stack Overflow

DataTables multiple styles on multiple tables in one page

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related