Customized Table style when using Jquery DataTables

Question

I am trying to add pagination to my html table using Datatables built on JQuery.

<script type="text/javascript">
    $(document).ready(function() {
    $('#example').dataTable( {
        "bJQueryUI": true,
                    "sPaginationType": "full_numbers",
                    "sDom": '<"fg-toolbar ui-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"lfr>t<"fg-toolbar ui-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix"ip>'
                } );
        } );
    </script>

<table id="example"
    style="border: silver solid 1px; width: 890px; margin-left: 0px; margin-bottom: 10px; font-size: 11px; padding-top: 10px;">
<tr class="thResultHeader">

Sorting is optional but not a problem if its not there.

My problem is when I use "bJQueryUI": true, I get a blue header for my column header and the pagination icons are not highlighted.When I use "bJQueryUI": false the pagination icons are highlighted and the header styles are overridden. All I need is pagination with my table style with or without sorting and highlighting of pagination icons. I am new to JQuery and Datatables and unfortunately cannot move away from it.

Allan · Accepted Answer · 2011-04-01 16:31:04Z

3

I am new to JQuery and Datatables and unfortunately cannot move away from it.

Why unfortunately, if you wouldn't mind saying?

I suspect that the issue you are having can be resolved by including the demo CSS that comes with DataTables for jQuery UI theming. My guess is that either you have the CSS used for non-theme roller styling (demo_table.css) or custom CSS which isn't providing what is needed for the pagination. The file in the DataTables distribution you want is media/css/demo_table_jui.css . Obviously there is nothing stopping you customising it fully, but it might give you a starting point at at least.

Allan

answered Apr 1, 2011 at 16:31

Allan

2191 silver badge2 bronze badges

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

6 Comments

Harish Over a year ago

I believe you are the creator of this plugin,I have integrated this plugin in my code cannot go back changing to some other functionality,

Allan Over a year ago

I am indeed :-). Could you say what functionality you feel is missing from DataTables so I can consider it for future development? Did the above help with your styling problem?

Harish Over a year ago

its weekend :)have to try on Monday,will defenitely tell you whether it helped.

Harish Over a year ago

The above solution did not work.My problem is very simple.I am trying to use Datatables to get pagination function.Sorting is optional .My css should not be overrided by the style in Datatables.What should be done for that?

Codigo Espagueti Over a year ago

If you don't want your css to be override why do you want to use "bJQuery: true"?

|

Codigo Espagueti · Accepted Answer · 2011-04-01 14:38:49Z

1

I am not sure what you mean with highlighting, but you could add your own css style to the pagination elements with a live event.

<style>
   .highlighted {color:#F00;}
</style>
<script type="text/javascript">
    $(document).ready(function() {
       $('#example').dataTable( { ... } );
       $('.dataTables_wrapper .fg-button').live('mouseenter mouseleave', 
         function() { $(this).toggleClass('highlighted'); });
    });
</script>

The highlighted style must be declared after the jquery-ui stylesheet link in order to have priority over the jquery-ui styles.

answered Apr 1, 2011 at 14:38

Codigo Espagueti

1742 silver badges10 bronze badges

1 Comment

Harish Over a year ago

I want to modify the class of tr and th as well.Infact those are the properties that gets overridden.This solution does not solve my problem.

Sylvain Perron · Accepted Answer · 2011-04-29 20:35:56Z

1

I hear you... I just switched to dataTables and I found it difficult to place the right styling to my table because there is so many option and generated css class on this plugin. It's a good thing but a hard thing to learn also. I just used the th element to get my style across any table on my site.

th {
background-color: #94AECE;
color: #003366;
padding-left: .1em;
padding-right: .1em;
border-left: 1px solid #dbddff;
border-right: 1px solid #dbddff;
border-bottom: 1px solid #dbddff;

}

You should be aware that the "sDom" option is the one where you say which styles is applied to your table. I personnaly stayed simple with a "sDom": '<"header"fr>t<"footer"pi>' which mapped my style to "header" and "footer" css class. After that you only need to define "header" and "footer" in your website css.

answered Apr 29, 2011 at 20:35

Sylvain Perron

4133 silver badges7 bronze badges

2 Comments

Harish Over a year ago

I solved this issue,now the table is of my style,BTW I dont use sDom.I did not understand it.I removed the search bar at the top as it was not necessary for me

Sylvain Perron Over a year ago

For the <TR> I made 2 css class named ".odd" and ".even". So I have a alternating color for my rows.

Jose Rocha · Accepted Answer · 2015-03-06 17:30:03Z

0

After testing the solution of Codigo Espagueti, i did notice a problem when the last number of the hexadecimal random is zero(0), the generated string will simple have 5 charaters instead of 6. So this is my sugestion.

Have a good cooding.

'#' + (function () {
        while (true) {
          var rdm = (Math.random() * 0xFFFFFF << 0).toString(16);
          if (rdm.length == 6)
            return rdm;
        }
      })();

edited Mar 6, 2015 at 17:30

answered Mar 6, 2015 at 17:19

Jose Rocha

1,1158 silver badges20 bronze badges

Collectives™ on Stack Overflow

Customized Table style when using Jquery DataTables

4 Answers 4

6 Comments

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related