Kendo ui 剑道网格分页不适用于响应插件footable

嗨，我有一个剑道网格，它使用footable插件响应。它工作得很好。但当我单击分页时，它正在破坏ui。附页的图像。你能帮我修一下吗

             @(Html.Kendo().Grid<UCM.UCW.PresentationService.Entity.Dto.Task>()
                              .Name("ValidationTaskListGrid")
                              .HtmlAttributes(new { @class = "table-bordered" })
                              .TableHtmlAttributes(new { @class = "footable" })
                              .Columns(columns =>
                              {
                                  columns.Bound(p => p.TaskDueDate)
                                      .Sortable(true)
                                      .Title("Due Date")
                                      .HeaderHtmlAttributes(new { data_class = "expand" });

                                  columns.Bound(p => p.StateCode)
                                      .Sortable(true)
                                      .Title("State")
                                      .HeaderHtmlAttributes(new { data_hide = "phone_s" });

                                  columns.Bound(p => p.DocumentType)
                                      .Sortable(true)
                                      .Title("Document Type")
                                         .HeaderHtmlAttributes(new { data_hide = "phone,phone_s" });

                                  columns.Bound(p => p.Form)
                                      .Sortable(true)
                                      .Title("Form")
                                         .HeaderHtmlAttributes(new { data_hide = "phone,tablet,phone_s" });

                                  columns.Bound(p => p.UnemploymentDocumentId)
                                      .Sortable(true)
                                      .Title("Document ID")
                                         .HeaderHtmlAttributes(new { data_hide = "phone,tablet,phone_s" });

                                  columns.Bound(p => p.TaskSubject)
                                      .Sortable(true)
                                      .Title("Task Name ")
                                         .HeaderHtmlAttributes(new { data_hide = "phone,tablet,phone_s" });

                                  columns.Bound(p => p.TaskAssignedTo)
                                      .Sortable(true)
                                      .Title("Assigned To ")
                                       .HeaderHtmlAttributes(new { data_hide = "phone,tablet,phone_s" });

                                  columns.Bound(p => p.InstanceName)
                                      .Sortable(false)
                                      .Title("Actions")
                                      // .HeaderHtmlAttributes(new { data_hide = "phone,phone_s" })
                                      .HtmlAttributes(new { style = "text-align: center" })
                                      .ClientTemplate("<a href = '" + Url.Action("GetUnemploymentDocument", "UnemploymentDocument",
                                      new { UnemploymentDocumentId = "#=UnemploymentDocumentId#", taskId = "#=TaskId#", taskAssignedToType = "#=TaskAssignedToType#" }) + "' class='btn btn-function'>Start Task</a>");


                              })

                              .Pageable(pageable => pageable.ButtonCount(6)
                                  .Messages(m => m.Display("Showing {0}-{1} of {2}")))
                              .Sortable(sortable => sortable.SortMode(GridSortMode.SingleColumn).AllowUnsort(false))
                              .DataSource(dataSource => dataSource
                                  .Ajax()
                                  .Read(read => read.Action("GetValsync", "WorkList"))
                                  //.ServerOperation(WebConstants.EnableServerOperation)
                                  .ServerOperation(true)
                                  .PageSize(AppContextHelper.Instance.ApplicationConfiguration.DefaultViewItem)
                                  .Sort(sort =>
                                  {
                                      sort.Add("TaskDueDate").Descending();

                                  }))
                              .Events(x => x.DataBound("GridDataBound")

                              ))

@（Html.Kendo（）.Grid（））
.Name（“ValidationTaskListGrid”）
.HtmlAttributes（新的{@class=“table bordered”}）
.TableHtmlatAttributes（新的{@class=“footable”}）
.列（列=>
{
columns.Bound（p=>p.TaskDueDate）
.Sortable（true）
.标题（“到期日”）
.HeaderHtmlAttributes（新的{data_class=“expand”}）；
columns.Bound（p=>p.StateCode）
.Sortable（true）
.标题（“国家”）
.HeaderHtmlAttributes（新的{data_hide=“phone_s”}）；
columns.Bound（p=>p.DocumentType）
.Sortable（true）
.标题（“文件类型”）
.HeaderHtmlAttributes（新的{data_hide=“phone，phone_s”}）；
columns.Bound（p=>p.Form）
.Sortable（true）
.名称（“表格”）
.HeaderHtmlAttributes（新的{data_hide=“手机、平板电脑、手机”}）；
columns.Bound（p=>p.UnemploymentDocumentId）
.Sortable（true）
.标题（“文件ID”）
.HeaderHtmlAttributes（新的{data_hide=“手机、平板电脑、手机”}）；
columns.Bound（p=>p.TaskSubject）
.Sortable（true）
.标题（“任务名称”）
.HeaderHtmlAttributes（新的{data_hide=“手机、平板电脑、手机”}）；
columns.Bound（p=>p.tasksassignedto）
.Sortable（true）
.头衔（“转让给”）
.HeaderHtmlAttributes（新的{data_hide=“手机、平板电脑、手机”}）；
columns.Bound（p=>p.InstanceName）
.Sortable（false）
.标题（“行动”）
//.HeaderHtmlAttributes（新的{data_hide=“phone，phone_s”}）
.HtmlAttributes（新的{style=“text align:center”}）
.ClientTemplate（“”）；
})
.Pageable（Pageable=>Pageable.ButtonCount（6）
.Messages（m=>m.Display（“显示{0}-{1}{2}”））
.Sortable（Sortable=>Sortable.SortMode（GridSortMode.SingleColumn）.AllowUnsort（false））
.DataSource（DataSource=>DataSource
.Ajax（）
.Read（Read=>Read.Action（“GetValsync”，“WorkList”））
//.ServerOperation（WebConstants.EnableServerOperation）
.ServerOperation（真）
.PageSize（AppContextHelper.Instance.ApplicationConfiguration.DefaultViewItem）
.Sort（Sort=>
{
sort.Add（“TaskDueDate”）.Descending（）；
}))
.Events（x=>x.DataBound（“GridDataBound”）
))