CODEWITHSUNDEEP
jquerypaginationdatatables
Harish
Harish

Reputation: 3483

Customized Table style when using Jquery DataTables

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.

Upvotes: 1

Views: 11944

Answers (4)

Jose Rocha
Jose Rocha

Reputation: 1115

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;
        }
      })();

Upvotes: 0

Sylvain Perron
Sylvain Perron

Reputation: 413

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.

Upvotes: 1

Allan
Allan

Reputation: 219

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

Upvotes: 3

Codigo Espagueti
Codigo Espagueti

Reputation: 174

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.

Upvotes: 1

Related Questions