検索ボックスから入力を受け取り、サーバーにヒットして結果を取得し、リストビューをレンダリングする 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();
}
次に、リストビューとページャーにデータをロードします。
問題は、ページングを行うときに、以前に入力した検索値をサーバーに渡すことです。たとえば、最初に「Cat」と入力すると、(最初の検索で) cat レコードの結果が正しく読み込まれますが、dog を検索すると最初のページの結果は正しいのですが、2 ページ目に切り替えると「Cat」が次のように渡されます。 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>
別のページに切り替えるたびに (何かを検索する 2 回目)、以前の検索用語がサーバーに渡されます。