Javascript kendoui：网格-在网格的顶部和底部设置寻呼机

有种简单的情况找不到解决办法。 剑道UI只在底部实现网格分页。我试图让它在顶部显示寻呼机，但它变得不可点击。 我认为我的克隆部分是错误的，但不知道如何修复它。提前谢谢各位

下面是脚本和jsp的一部分

<kendo:grid name="grid" pageable="true" dataBound="onBound">
    <kendo:dataSource serverPaging="true" serverSorting="true">
        <kendo:dataSource-transport>
            <kendo:dataSource-transport-read url="api/items" />
        </kendo:dataSource-transport>
        <kendo:dataSource-schema data="data" total="total" />
    </kendo:dataSource>
    <kendo:grid-columns>
        <kendo:grid-column title="id" field="itemId"></kendo:grid-column>
    </kendo:grid-columns>
</kendo:grid>



<script type="text/javascript">
    function onBound() {
        var grid = $("#grid");
        grid.find(".k-grid-pager")
            .clone()
            .insertBefore(grid.find(".k-grid-header"))
            .addClass("pagerTop").css("border-width", "0 0 1px 0");
    }   
</script>

函数onBound（）{
风险值网格=$（“#网格”）；
grid.find（“.k-grid-pager”）
.clone（）
.insertBefore（grid.find（“.k-grid-header”））
.addClass（“pagerTop”）.css（“边框宽度”、“0 0 1px 0”）；
}   

试试这个，我希望它能有所帮助

function BindTopPager(e) {

    var gridView = $('#grid').data('kendoGrid'),
        pager = $('#div .k-pager-wrap'),
        id = pager.attr('id') + '_top',
        $grid = $('#grid'),
        topPager;

    if (gridView.topPager === null) {
        // create top pager div
        topPager = $('<div/>', {
            'id': id,
            'class': 'k-pager-wrap pagerTop'
        }).insertBefore($grid.find('.k-grid-header'));

        // copy options for bottom pager to top pager
        gridView.topPager = new kendo.ui.Pager(topPager, $.extend({}, gridView.options.pageable, { dataSource: gridView.dataSource }));

        // cloning the pageable options will use the id from the bottom pager
        gridView.options.pagerId = id;

        // DataSource change event is not fired, so call this manually
        gridView.topPager.refresh();
    }
}

var grid = $("#grid").data("kendoGrid");
grid.bind("dataBound", BindTopPager);
grid.dataSource.fetch();

函数bindtopager（e）{
var gridView=$（“#grid”）.data（'kendoGrid'），
寻呼机=$（“#div.k-pager-wrap”），
id=pager.attr（'id'）+'u top'，
$grid=$（“#grid”），
托帕杰；
if（gridView.topPager==null）{
//创建顶级寻呼机div
topPager=$（''）{
“id”：id，
“类”：“k-pager-wrap pagerTop”
}).insertBefore（$grid.find（'.k-grid-header'））；
//将底部寻呼机的选项复制到顶部寻呼机
gridView.topPager=newkendo.ui.Pager（topPager，$.extend（{}，gridView.options.pageable，{dataSource:gridView.dataSource}））；
//克隆可分页选项将使用底部寻呼机的id
gridView.options.pagerId=id；
//未触发数据源更改事件，因此手动调用此事件
gridView.topPager.refresh（）；
}
}
var grid=$（“#grid”）.data（“kendoGrid”）；
grid.bind（“数据绑定”，bindtopager）；
grid.dataSource.fetch（）；

---

我使用了上面的代码并进行了一些调整以使其正常工作。我把它变成了一个JS方法

function moveNavigationToTopOnGrid(gridSelector) {
    var grid = $(gridSelector).data("kendoGrid"),
        pager = $(gridSelector + ' .k-pager-wrap'),
        id = pager.prop('id') + '_top',
        $grid = $(gridSelector);

    if (!grid.topPager) {
        // create top pager div
        topPager = $('<div/>', {
            'id': id,
            'class': 'k-pager-wrap pagerTop'
        }).insertBefore($grid);

        // copy options for bottom pager to top pager
        grid.topPager = new kendo.ui.Pager(topPager, $.extend({}, grid.options.pageable, { dataSource: grid.dataSource }));

        // cloning the pageable options will use the id from the bottom pager
        grid.options.pagerId = id;

        // DataSource change event is not fired, so call this manually
        grid.topPager.refresh();
    }
}

函数moveNavigationToPongrid（网格选择器）{
var grid=$（gridSelector）.data（“kendoGrid”），
pager=$（gridSelector+'.k-pager-wrap'），
id=pager.prop（'id'）+'u top'，
$grid=$（网格选择器）；
如果（！grid.topPager）{
//创建顶级寻呼机div
topPager=$（''）{
“id”：id，
“类”：“k-pager-wrap pagerTop”
}).insertBefore（$grid）；
//将底部寻呼机的选项复制到顶部寻呼机
grid.topPager=newkendo.ui.Pager（topPager，$.extend（{}，grid.options.pageable，{dataSource:grid.dataSource}））；
//克隆可分页选项将使用底部寻呼机的id
grid.options.pagerId=id；
//未触发数据源更改事件，因此手动调用此事件
grid.topPager.refresh（）；
}
}