标题在应用 tablesorter 插件时搞砸了答案

【问题标题】：Header messed on applying tablesorter plugin标题在应用 tablesorter 插件时搞砸了
【发布时间】：2015-01-13 07:56:05
【问题描述】：

我使用 jQuery 中的表格排序器插件在表格中应用了小部件滚动器和小部件列选择器。

有没有人有过这样的经历？好像我的表格标题与列不匹配并且混乱。我正在使用最新的并使用theme.blue。我在这里遗漏了什么吗？我google了很多，但仍然没有解决我的问题。

请帮忙。任何答案将不胜感激。

[更新] 这是我生成表格的代码：

$.ajax({
            type:"POST",
            url:"../cdc/load/jsonTrack.php?",
            data:dataString,
            dataType: 'json',
            success: function(data){
                if(data.status === "success") { 
                    var elements = data.elements; 
                    if(elements.length === 0) {
                        $('#cdcTracking-list tbody').append( '<tr>' +
                            '<td colspan="7">No session to display</td>' +
                            '</tr>');
                    }
                    for( var i = 0; i < elements.length; i++){
                        var element = elements[i];

                        //console.log('session id:' + element.vesselCode);
                        $('#cdcTracking-list tbody').append( '<tr>' +
                            '<td style="color: green;">' + element.vesselCode + '</td>' +
                            '<td style="color: black;">' + element.voyage + '</td>' +
                            '<td style="color: black;">' + element.chasisNo + '</td>' +
                            '<td style="color: blue;">' + element.plateNo + '</td>' +
                            '<td style="color: blue;">' + element.bookingRef + '</td>' + 
                            '<td style="color: blue;">' + element.serviceTerm +'</td>'+
                            '</tr>'                                    
                        );
                    }
                }else { 
                    $('#cdcTracking-list tbody').append( '<tr><td colspan="7">No session to display</td></tr>');
                }
            }
        });

HTML 标头：

                <table id="cdcTracking-list" class="tablesorter-blue custom-popup" border="0" data-mode="columntoggle">
                    <thead>
                        <tr>
                            <th align="center">Vessel </th>
                            <th align="center">Voyage </th>
                            <th align="center">Chasis No</th>
                            <th align="center">Plate</th>
                            <th align="center" >Booking Ref</th>
                            <th align="center" >Service Term</th>
                        </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>

这是tablesorter Javascript：

$("#cdcTracking-list").tablesorter({
                    widthFixed: false,
                    showProcessing: true,
                    headerTemplate: '{content} {icon}',
                    widgets: ['zebra', 'scroller', 'columnSelector'],
                    widgetOptions: {
                        columnSelector_container: $('#columnSelector'),
                        columnSelector_columns: {
                            0: ['disable'] /* set to disabled; not allowed to unselect it */
                        },
                        columnSelector_saveColumns: true,
                        columnSelector_layout: '<label><input type="checkbox">{name}</label>',
                        columnSelector_name: 'data-selector-name',
                        columnSelector_mediaquery: true,
                        columnSelector_mediaqueryName: 'Auto: ',
                        columnSelector_mediaqueryState: true,
                        columnSelector_breakpoints: ['20em', '30em', '40em', '50em', '60em', '70em'],
                        columnSelector_priority: 'data-priority',
                        scroller_height: 300,
                        scroller_barWidth: 18,
                        scroller_upAfterSort: true,
                        scroller_jumpToHeader: true,
                        scroller_idPrefix: 's_'
                    }
                }).tablesorterPager(pagerOptions);

【问题讨论】：

我已经包含了我的代码
滚动小部件有很多问题，包括不能很好地与其他小部件一起使用。我希望我有时间修复它。

标签： javascript jquery css html-table tablesorter

【解决方案1】：

这里的示例：http://mottie.github.io/tablesorter/docs/example-widget-scroller.html 看起来 jQuery 的版本是 1.4.4。您可以尝试加载该版本以查看是否有帮助。我尝试了那个版本并且列排成一行，但它破坏了我的一些其他代码，所以我回到了最新的 jQuery。最终对我有用的是摆脱固定的列宽并使用标题中设置的百分比，例如：<th style="width:10%"> 用于前几列，然后其余的似乎排好。

【讨论】：