Help with misaligned sort indicators

chicagobob · July 2014

Hi,

I'm not sure how to debug this problem. I would greatly appreciate any advice pointing me in the right direction.

I'm on Mac OS X 10.9.3 with Ruby 2.1.2, Rails 4.1.4, and jquery-datatables-rails (2.1.10.0.2). The sort indicators at the top of the columns on my tables are misaligned. This must have happened within the past few days. Here is an example,

Note: I've zoomed up the image for clarity.

Thank you for any assistance.

Daimian · July 2014

I was hoping someone else would comment, but I'll take a guess....

Try checking to make sure your Datatable is only initialized once. I've seen that before.. just can't remember how it happened.

anag · July 2014

Inspect the sort indicator using chrome dev tools or a similar program, actually just paste us the entire th cell's HTML

chicagobob · July 2014

Here is the entire html for the TH:

<th class="sorting ui-state-default sorting_asc" tabindex="0" aria-controls="module_list_table" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Ordering: activate to sort column ascending" style="width: 123px;"><div class="DataTables_sort_wrapper">Ordering<span class="DataTables_sort_icon css_right ui-icon ui-icon-triangle-1-n"></span</div></th>

Thanks for any assistance.

chicagobob · July 2014

Also, I don't think I'm initializing it twice in any place, but specifically what should I look for?

In my rails app, on each different page's .js files, I'm initializing the tables that are used on that page, like so:

$(document).ready(function() {
    oTable = $('#template_list_table').dataTable({
      "bJQueryUI": true,
      "sPaginationType": "full_numbers",
      "oLanguage": {"sEmptyTable": "No Templates Found"}
    });
});

This one is for my templates page, I have a sections page, and a blueprint page, each with similar but slightly different table options. Thanks again for any help.

chicagobob · July 2014

PS: Thank you for a great library. I know how busy everyone is and how much effort support takes. I'm extremely grateful for any help with this problem.

Thanks & keep up the good work!

Bob

chicagobob · July 2014

Additional source from my problem page, in case it helps:

My CSS/JS inclusion order:

<link href="/assets/jquery.ui.core.css?body=1" media="all" rel="stylesheet" />
<link href="/assets/jquery.ui.theme.css?body=1" media="all" rel="stylesheet" />
<link href="/assets/dataTables/jquery.dataTables.css?body=1" media="all" rel="stylesheet" />
<link href="/assets/dataTables/src/demo_table_jui.css?body=1" media="all" rel="stylesheet" />
<link href="/assets/dataTables/extras/dataTables.tableTools.css?body=1" media="all" rel="stylesheet" />
<link href="/assets/application.css?body=1" media="all" rel="stylesheet" />
<link href="/assets/blueprints.css?body=1" media="all" rel="stylesheet" />
<link href="/assets/forms.css?body=1" media="all" rel="stylesheet" />
<link href="/assets/modules.css?body=1" media="all" rel="stylesheet" />
<link href="/assets/services.css?body=1" media="all" rel="stylesheet" />
<script src="/assets/jquery.js?body=1"></script>
<script src="/assets/jquery_ujs.js?body=1"></script>
<script src="/assets/dataTables/jquery.dataTables.js?body=1"></script>
<script src="/assets/dataTables/extras/dataTables.tableTools.js?body=1"></script>
<script src="/assets/blueprints.js?body=1"></script>
<script src="/assets/modules.js?body=1"></script>
<script src="/assets/services.js?body=1"></script>
<script src="/assets/application.js?body=1"></script>

And, the beginning of my table:

<div id="container">
    <div style="float:right; text-align:right; width: 50%; margin-bottom: 10px">
        <b>Welcome: Development User</b>
        <BR>
    </div>
    <div style="clear:both;">
    <div id="module_list_table_div">
        <table cellpadding="4" cellspacing="0" border="0" class="display" id="module_list_table">
            <thead>
                <tr>
                    <th>Ordering</th>
                    <th nowrap>Module Title</th>
                    <th>Version</th>
                    <th>DOS's</th>
                    <th>SOW's</th>
                    <th>Exh.&nbsp;A's</th>
                    <th>COA's</th>
                    <th>Active</th>
                    <th>Note(s)</th>
                    <th nowrap></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td align="right">110</td>
                    <td><a href="/module_cores/5">XServe Module</a></td>
                    <td align="right">1</td>
                    <td align="right">4</td>
                    <td align="right">0</td>
                    <td align="right">0</td>
                    <td align="right">0</td>
                    <td align="center">Y</td>
                    <td>-</td>
                    <td align="left">
                        <a href="/module_cores/5/edit">Edit</a>
                        <a href="/modules/duplicate?id=5">Duplicate</a>
                        <a href="/modules/new_version?id=5">New Version</a>
                        <a href="/modules/deactivate?id=5">Deactivate</a>
                        <a href="/modules/preview?id=5">Preview PDF</a>
                    </td>
                </tr>
                <!-- etc ..... more table data ..... -->

Daimian · July 2014

This might be part of the issue...
demo_table_jui.css isn't needed... you do however need http://cdn.datatables.net/plug-ins/be7019ee387/integration/jqueryui/dataTables.jqueryui.css

chicagobob · July 2014

Ok this is weird. I've added the direct links to the CDN version, but now the image alignment and offset problem is even worse see here.

New css & js includes, including link to CDN:

<link href="http://cdn.datatables.net/plug-ins/be7019ee387/integration/jqueryui/dataTables.jqueryui.css" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.core.css?body=1" media="all" rel="stylesheet" />
<link href="/assets/jquery.ui.theme.css?body=1" media="all" rel="stylesheet" />
<link href="/assets/dataTables/jquery.dataTables.css?body=1" media="all" rel="stylesheet" />
<link href="/assets/dataTables/extras/dataTables.tableTools.css?body=1" media="all" rel="stylesheet" />
<link href="/assets/application.css?body=1" media="all" rel="stylesheet" />
<link href="/assets/blueprints.css?body=1" media="all" rel="stylesheet" />
<link href="/assets/forms.css?body=1" media="all" rel="stylesheet" />
<link href="/assets/modules.css?body=1" media="all" rel="stylesheet" />
<link href="/assets/services.css?body=1" media="all" rel="stylesheet" />

<script src="/assets/jquery.js?body=1"></script>
<script src="/assets/jquery_ujs.js?body=1"></script>
<script src="/assets/dataTables/jquery.dataTables.js?body=1"></script>
<script src="/assets/dataTables/extras/dataTables.tableTools.js?body=1"></script>
<script src="/assets/blueprints.js?body=1"></script>
<script src="/assets/modules.js?body=1"></script>
<script src="/assets/services.js?body=1"></script>
<script src="/assets/application.js?body=1"></script>

Beginning of table declaration now:

<div id="container">
    <div style="float:right; text-align:right; width: 50%; margin-bottom: 10px">
        <b>Welcome: Development User</b>
        <BR>
    </div>
    <div style="clear:both;">
    <div id="module_list_table_div">
        <table cellpadding="4" cellspacing="0" border="0" class="display" id="module_list_table">
            <thead>
                <tr>
                    <th>Ordering</th>
                    <th nowrap>Module Title</th>
                    <th>Version</th>
                    <th>DOS's</th>
                    <th>SOW's</th>
                    <th>Exh.&nbsp;A's</th>
                    <th>COA's</th>
                    <th>Active</th>
                    <th>Note(s)</th>
                    <th nowrap></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td align="right">110</td>
                    <td><a href="/module_cores/5">XServe Module</a></td>
                    <td align="right">1</td>
                    <td align="right">4</td>
                    <td align="right">0</td>
                    <td align="right">0</td>
                    <td align="right">0</td>
                    <td align="center">Y</td>
                    <td>-</td>
                    <td align="left">
                        <a href="/module_cores/5/edit">Edit</a>
                        <a href="/modules/duplicate?id=5">Duplicate</a>
                        <a href="/modules/new_version?id=5">New Version</a>
                        <a href="/modules/deactivate?id=5">Deactivate</a>
                        <a href="/modules/preview?id=5">Preview PDF</a>
                    </td>
                </tr>

anag · July 2014

The only class in my tables which applies the up down carrot is .sorting try deleting that from your source in dev tools and see what's causing the extra sort icons to appear. If you can post a live example on jsfiddle or some place that would help

.sorting {
background: url('../images/interface/tables/sort_both.png') no-repeat 100%;
padding-right: 24px!important;
}

chicagobob · July 2014

Someone else just pointed out that in addition to including the CDN version there was a duplicate CSS file being loaded from the gem by this line:

<link href="/assets/dataTables/jquery.dataTables.css?body=1" media="all" rel="stylesheet" />
When I removed that, the duplicate and misaligned table sort icons were removed, now there is only one and it looks fine.

Thank you so much.

Help with misaligned sort indicators

Help with misaligned sort indicators

Answers

Howdy, Stranger!

Categories

DataTables

Help with misaligned sort indicators

Help with misaligned sort indicators

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables