kendo listview的DataBound事件从dataSource加载以前的参数

Question

我正在研究这个搜索功能，它通过搜索框接受输入，然后传递给 kendo 数据源，该数据源访问服务器并获取结果并呈现我的列表视图。代码如下：

 function searchClick(searchTerm) {

    var searchText = searchTerm;
    if (!searchTerm) {
        return;
    }

    var listView = $("#listView").data("kendoListView");
    if (!listView)
        createUI(searchText);
    else {
        listView.dataSource.read({
            searchTerm: searchText
        });
    }
}

> `function createUI(searchText) {`

    var tmpl = kendo.template($("#template").html());
    var dataSource = new kendo.data.DataSource({
        serverPaging: true,
        schema: {
            data: "ListMedia",
            total: "RowCount",
        },
        transport: {
            read: {
                url: gAppBaseURL + "Search/SearchData",
                type: "GET",
                dataType: "json",
                data: {
                    searchTerm: searchText,
                    pageSize: 25,
                    page: 1
                }
            }
        }

    });

    $("#listView").kendoListView({
        dataSource: dataSource,
        autoBind: false,
        template: tmpl,
        dataBound: function () {
            var ds = $("#listView").data("kendoListView").dataSource;
            if (ds.total() == 0) {
                return;
            }
        }
    });

    var pager = $("#pager").kendoPager({
        dataSource: dataSource,
        autoBind: false,
    }).data("kendoPager");

    return dataSource.read();
}

然后它将数据加载到我的 listView 和 Pager：

现在的问题是，当我进行分页时，它会将我之前输入的搜索值传递给服务器。例如，我首先输入“Cat”，然后它会正确加载 cat 记录的结果（在第一次搜索时），但是当我搜索 dog 时，第一页上的结果是正确的，但是当我切换到第二页时，它会将“Cat”传递为服务器的一个参数，它返回猫的结果。以下是我的 HTML：

<div class="SearchResultPage">
<input type="text" name="searchTextbox" id="searchTextbox" class="k-textbox" style="width:400px"/>
<button type="submit" id="btn_submitQry" onclick="onClickSearch()"></button>

<script>

    function onClickSearch() {
        var searchTerm = $('#searchTextbox').val();
        if (!searchTerm) {
            searchTerm = "@ViewBag.SearchText";
            $('#searchTextbox').val(searchTerm);
        }

        searchClick(searchTerm); //defined in universalSearch.js file
    }
</script>

每次我切换到另一个页面时（我第二次搜索某些东西），它都会将之前的搜索词传递给服务器。

Answer 1

您的函数createUI 将读取数据定义为来自parameter 的常量值，而不是函数。数据源中的分页会触发read 方法，因此您的分页仍然使用以前的搜索词。

您可以制作这样的函数来使read 数据获得新值（搜索词）。

function getSearchTerm() {
   return { searchTerm: $("#searchTextbox").val() };
}

并将您的 createUI 函数更改为这样

function createUI() {
    var tmpl = kendo.template($("#template").html()),
        dataSource = new kendo.data.DataSource({
        serverPaging: true,
        pageSize: 25
        schema: {
            data: "ListMedia",
            total: "RowCount",
        },
        transport: {
            read: {
                url: gAppBaseURL + "Search/SearchData",
                type: "GET",
                dataType: "json",
                data: {
                    searchTerm: getSearchTerm
                }
            }
        }
    });
}

然后每次读取时，它将运行此函数以获取新值。而你的搜索点击应该是这样的

function searchClick(searchTerm) {
    var searchText = searchTerm,
        listView = $("#listView").getKendoListView();

    if (!searchTerm) return;

    if (!listView)
        createUI();
    else {
        listView.dataSource.page(1); // reset paging and do read automatically
    }
}