CODEWITHSUNDEEP
jquerydatatabledatatables
Toms Code
Toms Code

Reputation: 1699

Applying two different CSS stylings to two different Datatables?

I've got two different instances of Datatables in my project. I would like them to have different CSS styling. For the purposes of this question, lets say I wanted to have different sized margins in the two tables. Is there a simple way to to do this?

Below is a simplified version of my code.

Table 1

HTML and JS:

<script>
  $(document).ready( function () {
  $('#all_assets_datatable').DataTable({
  "sDom": "ltipr",
  });
  } );
</script>

    <table id="all_assets_datatable" class="display">

        # Various table content

    </table>

CSS:

table.dataTable {
margin: 0px;
}

Table 2

HTML and JS: 

<script>
   $(document).ready( function () {
  $('#asset_changes_datatable').DataTable({
  "sDom": "ltipr",
  });
  } );
</script>

    <table id="asset_changes_datatable" class="display">

       # Various table content

    </table>

CSS:

table.dataTable {
margin: 10px;
}

Upvotes: 1

Views: 249

Answers (2)

4b0
4b0

Reputation: 22323

You can catch table by id , check id using if condition and if match apply CSS via jQuery like below.

var id = $('table').attr('id');
if (id == 'all_assets_datatable')
  $('table').css('margin', '0px')
else
  $('table').css('margin', '10px')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="all_assets_datatable" class="display">
  <tr>
    <td>1</td>
  </tr>
</table>

Upvotes: 1

Difster
Difster

Reputation: 3260

Wrap your datatables in two different divs and give those divs each a different name or class.

.dtOne table.datatable{
     margin: 0px;
 }

.dtTwo table.datatable{
         margin: 10px;
     }

<div class="dtOne">//Table one goes here</div>
<div class="dtTwo">//Table two goes here</div>

Upvotes: 1

Related Questions