Php 工具栏上有自动完成功能的kendoui网格？

更新： 我试着花了很多时间来解决这个问题，最后问题解决了。 但一开始，我非常感谢女主角和我的同事，他们帮助我走到了这一步

现在我被困在这里了

我输入用户名，它会在下拉列表中显示，按TAB键或输入后，会在网格中显示结果。 只有来自第“1”页的结果才会显示在网格中，但如果来自第“2”页或任何其他进一步的页面，则不会显示结果

以下是它的工作原理：

但当我搜索第1页以外的其他用户时，它不会在网格中显示其他用户。相反，我得到的是空网格。

萤火虫截图：

这是我在代码中做了更多更改后更新的代码：

  <?php
/*foreach($users_list_data->result() as $row){
    echo $row->Username."<br />";
}*/
?>

<div id="grid"></div>
    <div id="details" />
    <div class="second_column_content_container">
    </div>



<script>

function create_user() {

    var entryform = $("#insert_user_info");
    $.ajax({
        type : 'POST',
        url : '<?php echo base_url(); ?>/index.php/user_management/manage_users/createUser',
        data : entryform.serialize(),
        success : function(response) {
            $(".second_column").html(response);
        }
    });
}

function create_user_form() {


    $.ajax({
        type : 'POST',
        url : '<?php echo base_url(); ?>/index.php/user_management/manage_users/load_user_form',

        success : function(response) {
            $(".second_column").html(response);
        }
    });
}

function onChange(arg) {



        var selected = "";
        var grid = this;

        grid.select().each(function() {
            var dataItem = grid.dataItem($(this));
            selected = dataItem.Username;
        });

  $.ajax({
        type: "POST",
        url: "<?php echo base_url()?>index.php/user_management/manage_users/get_user_groups/"+selected,

        beforeSend: function(){


            $("#pre_image").attr("src","http://localhost/zorkif_new/images/pre.gif");

        },

        success: function(output_string) {


            $('.data_column_a').html(output_string);

        }
    });
 }


    var wnd, detailsTemplate;
    $(document).ready(function(){
        var serverBaseUrl = "<?php echo base_url(); ?>";
        $("#grid").kendoGrid({
            dataSource:{
                serverPaging: true,
                transport: {
                    read: serverBaseUrl + "index.php/user_management/manage_users/list_view/",
                    update: {
                        url: serverBaseUrl + "index.php/user_management/manage_users/userUpdate/",
                        type: "POST"
                    }
//                    destroy: {
//                        url: serverBaseUrl + "index.php/user_management/manage_users/userDelete/",
//                        dataType: "jsonp"
//                    }
                    //update: "<?php echo base_url() ?>index.php/user_management/manage_users/list_view/"
                },
                error: function(e) {
                    alert(e.responseText);
                },
                schema:{
                    data: "data",
                    total: "total",
                    model: {
                        id: "UserID",
                        fields: {
                            FirstName: { editable: true },
                            LastName: { validation: { required: true} },
                            MiddleNames:{validation:{required:true}}
                        }
                    }
                },
                pageSize:5

            },
            toolbar: kendo.template($("#toolbarTemplate").html()),
            scrollable: true,

            selectable: "row",
            sortable: true,
            filterable: true,
            pageable: {
                input: true,
                numeric: false
            },
            columns: [
                {
                    field: "UserID",
                    hidden:true
                },
                {
                    field: "Username",
                    title:"Username"
                },
                { field: "FirstName",
                    title:"First Name"
                },
                {field:"MiddleNames"},
                {field:"LastName"},
                {field:"City"},
                {field:"Email"},
                //{field:"Actions"},
                //{command: { text: "Delete", click: showDetails }, title: " ", width: "140px"},
                {command: { text: "Details", click: redirectToPage }, title: " ", width: "140px" },
                { command: { text: "Edit", click: redirectToEditPage }, title: "&nbsp;", width: "140px" }
            ],
            change: onChange,
            editable: "popup"
        });
        $("#users").kendoAutoComplete({
            minLength: 3,
            dataTextField: "Username",
            dataSource: {
                serverFiltering: true,
                transport: {
                    read: {
                        type: "GET",
                        dataType: "json",
                        contentType:'application/json; charset=utf-8',
                        url: serverBaseUrl + "index.php/user_management/manage_users/search_user/",
                        data: function (arg){
                            //alert(arg);
                            //alert({Username:autocompleteUsers.data("kendoAutoComplete").value});
                               return {Username : $("#users").data("kendoAutoComplete").value()};
                            //return $("#users").data("kendoAutoComplete").value();
                            }
                    }
                }
            },
            change: onChangeAutoComplete
        });

        function onChangeAutoComplete(){
            var value = this.value();
            var grid = $('#grid');
            if (value) {
                grid.data("kendoGrid").dataSource.filter({ field: "Username", operator: "Contains", value: value });
            } else {
                grid.data("kendoGrid").dataSource.filter({});
            }
        }
        /*$("#users").kendoAutoComplete({
            minLength: 3,
            dataTextField: "Title",
            //JSON property name to use
            dataSource: {
                pageSize: 10,
                //Limits result set
                transport: {
                    read: {
                        url: "/echo/json/",
                        //using jsfiddle echo service to simulate JSON endpoint
                        dataType: "json",
                        type: "POST",
                        data: {
                            // /echo/json/ echoes the JSON which you pass as an argument
                            json: JSON.stringify([
                                {
                                    "Title": "Doctor Who: The Trial of a Time Lord"},
                                {
                                    "Title": "Doctor Who: The Key to Time"},
                                {
                                    "Title": "Doctor Who: The Time Meddler"},
                                {
                                    "Title": "Doctor Who: The End of Time"}
                            ])
                        }
                    }
                }
            }
        });*/

        /*change: function () {
                var value = this.value();
                if (value) {
                    grid.data("kendoGrid").dataSource.filter({ field: "UserID", operator: "eq", value: value });
                } else {
                    grid.data("kendoGrid").dataSource.filter({});
                }
            }
        });*/
        /*$("#users").blur(function() {
            var data = $(this).data("kendoAutoComplete").dataSource._data,
                    nbData = data.length,
                    found = false;

            for(var iData = 0; iData < nbData; iData++) {
                if(this.value === data[iData].Title)
                    found = true;
            }
            console.log(found);
        });*/

        wnd = $("#details").kendoWindow({
                    title: "Customer Details",
                    modal: true,
                    visible: false,
                    resizable: false,
                    width: 300
                }).data("kendoWindow");
        detailsTemplate = kendo.template($("#template").html());

    });

    function redirectToPage(e){
        e.preventDefault();
        var row = $(e.target).closest("tr");
        var item = $("#grid").data("kendoGrid").dataItem(row);
        $.ajax({
            type: "POST",
            url: "<?php echo base_url().'index.php/user_management/manage_users/ViewProfile/'?>"+JSON.parse(item.UserID),
            success: function(output_string){
                $('.second_column_content_container').html(output_string);
                //$('.second_column_content_container').innerHTML("hello");
                //alert(output_string);
            },
            error: function(data){
                alert("error");
            }
        });
    }
    function redirectToEditPage(e){
        e.preventDefault();
        var row = $(e.target).closest("tr");
        var item = $("#grid").data("kendoGrid").dataItem(row);
        $.ajax({
            type: "POST",
            url: "<?php echo base_url().'index.php/user_management/manage_users/edit_user/'?>"+JSON.parse(item.UserID),
            success: function(output_string){
                $('.second_column_content_container').html(output_string);
                //$('.second_column_content_container').innerHTML("hello");
                //alert(output_string);
            },
            error: function(data){
                alert("error");
            }
        });
    }
        //show details on a popup
       function showDetailsPopup(e) {
        e.preventDefault();
        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        wnd.content(detailsTemplate(dataItem));
        wnd.center().open();
    }

    //This will redirect to Next Page
    function showDetails(e) {
        e.preventDefault();
        var row = $(e.target).closest("tr");
        var item = $("#grid").data("kendoGrid").dataItem(row);
        $.ajax({
            type: "POST",
            url: "<?php echo base_url().'index.php/user_management/manage_users/list_view/'?>"+JSON.parse(item.UserID),
            success: function(data){
                alert("done");
                //$('.second_column_content_container').html(output_string);
                //$('.second_column_content_container').innerHTML("hello");
                //alert(output_string);
            },
            error: function(data){
                alert("error");
            }
        });


        //var grid = $("#grid").data("kendoGrid");

        //alert(JSON.parse(item.UserID));
        //window.location.href="http://www.google.com/";



    }
</script>
        <script type="text/x-kendo-template" id="template">
                <div id="details-container">
                    <h2>#= FirstName #</h2>
                    <h2>City: #= City # </h2>
                </div>
        </script>
<script type="text/x-kendo-template" id="toolbarTemplate">
    <div class="toolbar">
        <label class="category-label" for="users">Search Users: </label>
        <input type="text" id="users" style="width: 250px;" />
    </div>
</script>

<div class="data_column_a">
    <img src=""  id="pre_image" >
</div>

函数create_user（）{
var entryform=$（“插入用户信息”）；
$.ajax({
键入：“POST”，
url:“/index.php/user\u management/manage\u users/createUser”，
数据：entryform.serialize（），
成功：功能（响应）{
$（“.second_column”）.html（回复）；
}
});
}
函数create_user_form（）{
$.ajax({
键入：“POST”，
url:“/index.php/user\u management/manage\u users/load\u user\u form”，
成功：功能（响应）{
$（“.second_column”）.html（回复）；
}
});
}
函数onChange（arg）{
var selected=“”；
var grid=此；
grid.select（）.each（函数（））{
var dataItem=grid.dataItem（$（this））；
selected=dataItem.Username；
});
$.ajax({
类型：“POST”，
url:“index.php/user\u management/manage\u users/get\u user\u groups/”+选中，
beforeSend:function（）{
$（“pre#u image”）.attr（“src”http://localhost/zorkif_new/images/pre.gif");
},
成功：函数（输出字符串）{
$（'.data\u column\u a'）.html（输出字符串）；
}
});
}
变量wnd，细节模板；
$（文档）.ready（函数（）{
var serverBaseUrl=“”；
$（“#网格”）.kendoGrid({
数据源：{
对,，
运输：{
阅读：serverBaseUrl+“index.php/user\u management/manage\u users/list\u view/”，
更新：{
url:serverBaseUrl+“index.php/user\u management/manage\u users/userUpdate/”，
类型：“职位”
}
//销毁：{
//url:serverBaseUrl+“index.php/user\u management/manage\u users/userDelete/”，
//数据类型：“jsonp”
//                    }
//更新：“index.php/user\u management/manage\u users/list\u view/”
},
错误：函数（e）{
警报（如responseText）；
},
模式：{
数据：“数据”，
总计：“总计”，
型号：{
id:“用户id”，
字段：{
名字：{可编辑：true}，
LastName:{验证：{必需：true}}，
中间名：{验证：{必需：true}}
}
}
},
页面大小：5
},
工具栏：kendo.template（$（“#toolbarTemplate”）.html（），
可滚动：对，
可选：“行”，
可排序：是的，
可过滤：正确，
可分页：{
输入：正确，
数字：false
},
栏目：[
{
字段：“用户ID”，
隐藏：真的
},
{
字段：“用户名”，
标题：“用户名”
},
{字段：“名字”，
标题：“名字”
},
{字段：“中间名”}，
{字段：“LastName”}，
{字段：“城市”}，
{字段：“电子邮件”}，
//{字段：“操作”}，
//{命令：{文本：“删除”，单击：showDetails}，标题：，宽度：“140px”}，
{命令：{text:“Details”，单击：redirectToPage}，标题：，宽度：“140px”}，
{命令：{文本：“编辑”，单击：重定向到编辑页}，标题：，宽度：“140px”}
],
改变：一旦改变，
可编辑：“弹出窗口”
});
$（“#用户”）.kendoAutoComplete({
最小长度：3，
dataTextField:“用户名”，
数据源：{
是的，
运输：{
阅读：{
键入：“获取”，
数据类型：“json”，
contentType:'application/json；charset=utf-8'，
url:serverBaseUrl+“index.php/user\u management/manage\u users/search\u user/”，
数据：函数（arg）{
//警报（arg）；
//警报（{Username:autocompleteesers.data（“kendoAutoComplete”）.value}）；
返回{Username:$（“#users”）.data（“kendoAutoComplete”）.value（）}；
//返回$（“#users”）.data（“kendoAutoComplete”）.value（）；
}
}
}
},
更改：onChangeAutoComplete
});
函数onChangeAutoComplete（）{
var value=this.value（）；
变量网格=$（“#网格”）；
如果（值）{
grid.data（“kendoGrid”）.dataSource.filter（{field:“Username”，operator:“Contains”，value:value}）；
}否则{
grid.data（“kendoGrid”）.dataSource.filter（{}）；
}
}
/*$（“#用户”）.kendoAutoComplete({
最小长度：3，
transport     : {
    read    : {
        url : "search_user.php",
        data: function (arg) {
            return {Username : autocompleteUsers.data("kendoAutoComplete").value()};
        }
    },
    dataType: "json",
    type    : "POST"
},

var autocompleteUsers = $("#users").kendoAutoComplete({
    dataTextField: "Username",
    dataSource   : {
        severFiltering: true,
        transport     : {
            read    : {
                url : "search_user.php",
                data: function (arg) {
                    return {Username: autocompleteUsers.data("kendoAutoComplete").value()};
                }
            },
            dataType: "json",
            type    : "POST"
        }
    },
    change       : function () {
        var username = autocompleteUsers.data("kendoAutoComplete").value();
        var filter = {
            logic  : "and",
            filters: [
                {
                    ignoreCase: true,
                    field     : "Username",
                    value     : username,
                    operator  : "startswith"
                }
            ]
        };
        $("#grid").data("kendoGrid").dataSource.filter(filter);
    }
});