0

我正在研究这个搜索功能,它通过搜索框接受输入,然后传递给 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>

每次我切换到另一个页面时(我第二次搜索某些内容),它都会将上一个搜索词传递给服务器。

4

1 回答 1

1

您的函数createUI将读取数据定义为常量值 fromparameter而不是函数。数据源中的分页将触发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
    }
}
于 2015-05-26T01:58:11.933 回答