Question

我正在研究这个搜索功能，它通过搜索框输入，然后传递给kendo dataSource，它击中服务器并获取结果并呈现我的列表视图。这是代码：

 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＆＃39; Cat＆＃39;然后它会正确加载cat记录的结果（在第一次搜索时），但是当我搜索第一页上的结果时，第一页上的结果是正确的，但是当我切换到第二页时，它会通过“Cat＆＃39; Cat＆＃39;作为返回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
    }
}

从dataSource

1 个答案: