Question

在最后一天左右，我一直在努力让两个相当流行的jquery脚本一起工作，dropkick.js和tablesorter.pager.js。我对JS比较陌生，但我遇到的问题是不知道通过dropkick函数的正确语法。

两个脚本都运行相同版本的jquery，我遇到的唯一问题是，当进行选择时，显示的结果数量不会改变。例如，如果在表格中显示10个结果，并且我选择5作为选择选项，则表格应该只显示5个结果而不重新加载页面。

两个脚本都可以独立运行，但是如果不使用更改函数，dropkick.js不对其值执行任何操作。

以下是表单HTML数据：

表格ID：“＃user-search-results”

<div id="pager" class="pager">
<form>
    <img src="images/first.png" class="first"/>
    <img src="images/prev.png" class="prev"/>
    <input type="text" class="pagedisplay"/>
    <img src="images/next.png" class="next"/>
    <img src="images/last.png" class="last"/>
    <select class="pagesize">
        <option value="1">1 per page</option>
        <option value="2">2 per page</option>
                    <option value="100">100 per page</option>

             </select>
</form>
</div>

注意：低值是出于测试目的。

jquery.tablesorter.pager.js

(function($) {
$.extend({
    tablesorterPager: new function() {

        function updatePageDisplay(c) {
            var s = $(c.cssPageDisplay,c.container).val((c.page+1) + c.seperator + c.totalPages);   
        }

        function setPageSize(table,size) {
            var c = table.config;
            c.size = size;
            c.totalPages = Math.ceil(c.totalRows / c.size);
            c.pagerPositionSet = false;
            moveToPage(table);
            fixPosition(table);
        }

        function fixPosition(table) {
            var c = table.config;
            if(!c.pagerPositionSet && c.positionFixed) {
                var c = table.config, o = $(table);
                if(o.offset) {
                    c.container.css({
                        top: o.offset().top + o.height() + 'px',
                        position: 'absolute'
                    });
                }
                c.pagerPositionSet = true;
            }
        }

        function moveToFirstPage(table) {
            var c = table.config;
            c.page = 0;
            moveToPage(table);
        }

        function moveToLastPage(table) {
            var c = table.config;
            c.page = (c.totalPages-1);
            moveToPage(table);
        }

        function moveToNextPage(table) {
            var c = table.config;
            c.page++;
            if(c.page >= (c.totalPages-1)) {
                c.page = (c.totalPages-1);
            }
            moveToPage(table);
        }

        function moveToPrevPage(table) {
            var c = table.config;
            c.page--;
            if(c.page <= 0) {
                c.page = 0;
            }
            moveToPage(table);
        }


        function moveToPage(table) {
            var c = table.config;
            if(c.page < 0 || c.page > (c.totalPages-1)) {
                c.page = 0;
            }

            renderTable(table,c.rowsCopy);
        }

        function renderTable(table,rows) {

            var c = table.config;
            var l = rows.length;
            var s = (c.page * c.size);
            var e = (s + c.size);
            if(e > rows.length ) {
                e = rows.length;
            }


            var tableBody = $(table.tBodies[0]);

            // clear the table body

            $.tablesorter.clearTableBody(table);

            for(var i = s; i < e; i++) {

                //tableBody.append(rows[i]);

                var o = rows[i];
                var l = o.length;
                for(var j=0; j < l; j++) {

                    tableBody[0].appendChild(o[j]);

                }
            }

            fixPosition(table,tableBody);

            $(table).trigger("applyWidgets");

            if( c.page >= c.totalPages ) {
                moveToLastPage(table);
            }

            updatePageDisplay(c);
        }

        this.appender = function(table,rows) {

            var c = table.config;

            c.rowsCopy = rows;
            c.totalRows = rows.length;
            c.totalPages = Math.ceil(c.totalRows / c.size);

            renderTable(table,rows);
        };

        this.defaults = {
            size: 1,
            offset: 0,
            page: 0,
            totalRows: 0,
            totalPages: 0,
            container: null,
            cssNext: '.next',
            cssPrev: '.prev',
            cssFirst: '.first',
            cssLast: '.last',
            cssPageDisplay: '.pagedisplay',
            cssPageSize: '.pagesize',
            seperator: "/",
            positionFixed: false,
            appender: this.appender
        };

        this.construct = function(settings) {

            return this.each(function() {   

                config = $.extend(this.config, $.tablesorterPager.defaults, settings);

                var table = this, pager = config.container;

                $(this).trigger("appendCache");

                config.size = parseInt($(".pagesize",pager).val());

                $(config.cssFirst,pager).click(function() {
                    moveToFirstPage(table);
                    return false;
                });
                $(config.cssNext,pager).click(function() {
                    moveToNextPage(table);
                    return false;
                });
                $(config.cssPrev,pager).click(function() {
                    moveToPrevPage(table);
                    return false;
                });
                $(config.cssLast,pager).click(function() {
                    moveToLastPage(table);
                    return false;
                });
                $(config.cssPageSize,pager).change(function() {
                    setPageSize(table,parseInt($(this).val()));
                    return false;
                });
            });
        };

    }
});
// extend plugin scope
$.fn.extend({
    tablesorterPager: $.tablesorterPager.construct
});

})(jQuery);

工作台分拣机脚本：

<script defer="defer">
$(document).ready(function() 
{ 
    $('#user-search-results')
    .tablesorter({widthFixed: false, widgets: ['zebra']})
    .tablesorterPager({container: $('#pager')});

} 
); 
</script>

我的最新版本包括dropkick：

<script defer="defer">
$(document).ready(function() 
{ 
    $('#user-search-results')
    .tablesorter({widthFixed: false, widgets: ['zebra']})
    .tablesorterPager({container: $('#pager')});

    $('.pagesize').dropkick({
    change: function () {
        tablesorterPager({container: $('#pager')});
    }
    });

} 
); 
</script>

我尝试在dropkick change函数中调用pager脚本中的不同函数，并传递相应函数的必需变量，包括'value'。

例如：

<script defer="defer">
$(document).ready(function() 
{ 
    $('#user-search-results')
    .tablesorter({widthFixed: false, widgets: ['zebra']})
    .tablesorterPager({container: $('#pager')});

    $('.pagesize').dropkick({
    change: function (value) {
        setPageSize('table#user-search-results', value);
    }
    });

} 
); 
</script>

我非常困难，它正在阻碍我的整个项目。正如我之前提到的，我是jquery的新手，我真的很感激任何帮助。

Answer 1

我在尝试使用dropkick把选区放到同一个地方时遇到了很多问题，但这里有a demo。

$('table')
    .bind('pagerInitialized', function (e, c) {
        $(".pagesize, .gotoPage").dropkick({
            change: function (value, label) {
                $(this).trigger('change');
            }
        });
    })
    .tablesorter({
        theme: 'blue'
    })
    .tablesorterPager({
        container: $(".pager"),
        // {page}, {totalPages}, {startRow}, {endRow} and {totalRows}
        output: '{startRow} to {endRow} ({totalRows})'
    });

请注意，底部寻呼机的选择名称（name="pagesize2"）必须与顶级名称（name="pagesize"）

或者，我尝试了其他方法，例如使用pure css，其中的选项包含<label>

 .tablesorter-pager select {
    padding:3px;
    margin: 0;
    border-radius:4px;
    -webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    background: #f8f8f8;
    color:#888;
    border:none;
    outline:none;
    display: inline-block;
    -webkit-appearance:none;
    cursor:pointer;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .tablesorter-pager select {
        padding-right:18px
    }
    label {
        position:relative
    }
    label:after {
        content:'<>';
        font:11px"Consolas", monospace;
        color:#aaa;
        -webkit-transform:rotate(90deg);
        position:absolute;
        right:4px;
        top:2px;
        padding:0 0 2px;
        pointer-events:none;
        border-bottom:1px solid #ddd;
    }
}

使用uniform.js，这是我的最爱 - demo：

$("select").uniform();

$('table')
    .bind('pagerInitialized', function (e, c) {
        $.uniform.update();
    })
    .tablesorter({
        theme: 'blue'
    })
    .tablesorterPager({
        container: $(".pager"),
        // {page}, {totalPages}, {startRow}, {endRow} and {totalRows}
        output: '{startRow} to {endRow} ({totalRows})'
    });

通过DropKick.js传递表分类器功能

1 个答案: