Question

我在jQuery中使用表分类器插件在我的表中应用了widget-scroller和widget列Selector。

有没有人有这样的经历？好像我的表头不匹配列和乱码。我正在使用最新版本并使用theme.blue。我在这里遗失了什么吗？我google了很多但仍未解决我的问题。

enter image description here

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

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

$.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);

Answer 1

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

标题搞砸应用tablesorter插件

1 个答案: