在wordpress中使用Tablesorter的列中的数字范围

时间:2015-03-18 16:39:06

标签: php jquery wordpress range tablesorter

我打算使用Tablesorter插件对wordpress主题中的表进行排序。在我的一个表格列中,我有一系列值(即8-10,5-12等)。在此列上,排序不起作用。我在stackoverflow中看到了解决方案example。我试图实现这个但没有运气。一般情况下,排序工作在我的表上,但它在该列上提供了错误的结果。

这是我的头文件,其中包含脚本:

 <script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery-latest.js"></script>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery.tablesorter.js"></script>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery.tablesorter.widgets.js"></script>

这是我的表

 <table cellspacing='0' id="posts-table"> <!-- cellspacing='0' is important, must stay -->

            <!-- Table Header -->
            <thead>
            <tr>
                <th>Col1</th>
                <th>Col2</th>
                <th>Col3</th>
                <th>Col4</th>
                <th>Col5</th>
                <th>Col6</th>
            </tr>
            </thead>
            <!-- Table Header -->

            <!-- Table Body -->

            <?php /* Start the Loop */
            $i = 1;?>
            <?php while ( have_posts() ) : the_post(); ?>
                <?php
                $val1 = get_post_meta($post->ID, 'x-value', true);
                $post_categories = get_the_category();
                $categories_by_id = array();
                foreach ( $post_categories as $category ) {
                    $categories_by_id[$category->cat_ID] = $category;
                }
                foreach ( $post_categories as $category ) {
                    unset( $categories_by_id[$category->category_parent] );
                }

                    echo '<tr>';
                        echo '<td class="align-center">'; echo $i++; echo'</td>';
                        echo '<td>'; echo end($categories_by_id)->cat_name; echo'</td>';
                        echo '<td>'; echo the_title(); echo'</td>';
                        echo '<td class="align-center">'; echo $val1; echo'</td>';
                        echo '<td class="align-center">'; echo $val1; echo'</td>';
                        echo '<td class="align-center">'; echo $val1; echo'</td>';
                    echo'</tr>';

                ?>
            <?php endwhile; ?>
            <!-- Table Body -->
        </table>

这是tablesorter的初始化

$(document).ready(function()
{
    $("#posts-table").tablesorter({
        theme: 'blue',
        sortList: [[1,0]],
        widthFixed: true,
        widgets: ['zebra', 'filter'],
        widgetOptions: {
            filter_functions: {
                1 : function(e, n, f, i) {
                    var parts = e.split('-'),
                        val = parseFloat(f),
                        min = parseFloat(parts[0]),
                        max = parseFloat(parts[1] || 999); // default max = 999
                    return val >= min && val <= max;
                }
            },
            filter_formatter     : {
                1 : function($cell, indx){
                    return $.tablesorter.filterFormatter.uiSlider( $cell, indx, {
                        values : 0,
                        min : 0,
                        max : 60,
                        delayed : false,
                        exactMatch: false,
                        valueToHeader : false
                    });
                }
            }
        }
    });
}

);

有什么想法为什么这不起作用?对不起,如果它听起来很愚蠢。干杯:)

1 个答案:

答案 0 :(得分:0)

filter_formatter代码与单独的过滤器格式化程序文件一起使用。我不认为这是必要的,或者可能是代码不适合你的原因。

删除该代码块,看看它是否修复了排序问题(demo):

$(function () {
    $('table').tablesorter({
        theme: 'blue',
        sortList: [[1, 0]],
        widthFixed: true,
        widgets: ['zebra', 'filter'],
        widgetOptions: {
            filter_functions: {
                1: function (e, n, f, i) {
                    var parts = e.split('-'),
                        val = parseFloat(f),
                        min = parseFloat(parts[0]),
                        max = parseFloat(parts[1] || 999); // default max = 999
                    return val >= min && val <= max;
                }
            }
        }
    });
});