Jquery 如何将剑道网格数据源更新为远程url，但不触发ajax调用？

看看我的

不幸的是，剑道网格似乎并没有为优秀的SEO（）提供本机解决方案。 但我想我会尝试一下，看看我能做些什么。这就是我到目前为止所做的：

为了通过剑道网格实现适当的渐进增强方法，我有3个部分：

用于SEO目的的预先存在的HTML表（参见FIDLE的HTML部分）

HTML表中的数据相同，但作为JSON（请参见FIDLE的js部分顶部）。这是因为剑道将显示正确的页面和总页面（如果我让它单独转换HTML网格，它不会这样做！！）

所有后续调用都将通过ajax处理。（参见小提琴中网格输出上方的“渐进增强me”按钮）

为了保持一切整洁，我有一个服务器端脚本，可以生成HTML表和JSON。我只是在视图（页面）中插入服务器端变量，一切都很好

但我还有一个问题。我需要将数据源更新为远程url，如您按下“Progressive Enhanced Me！”按钮时所示。当按下按钮时，会进行不必要的ajax调用。在实际应用程序中，这种不必要的初始ajax调用可能代价高昂，冗余的服务器端数据库查询可能会降低页面速度是否有任何方法可以在不进行ajax调用的情况下更新数据源？

（我也愿意接受任何更好的方法的建议，以实现剑道网格的渐进增强）

编辑：

---

我尝试了另一种方法，使用

requestStart

调用。请参见。然而，我认为这是行不通的，因为我没有办法将最后一次单击（页码单击或排序标题单击等）转移到新的数据源。

因为我需要网格对SEO友好，所以我最终成功地通过使用。请看我的回答：

我还可以使用样式将其与Bootstrap3配合使用

更新：
实际上，我现在使用的是分叉版本：
Jqgrid体积太大，在手机上玩得不快

myData = { 
            // some json here...see fiddle 
         };

$("#grid").kendoGrid({
    dataSource: {
        data : myData,
        dataType: "json",
        pageSize:5,
        serverPaging: true,
        serverSorting: true,        
        schema: {
            data: "results",
            total: function (data) {
                return data.__count;       
            }
        }
    },
    height: 250,
    filterable: true,
    sortable: true,
    pageable: true,
    columns: [
        {
            field:"OrderID",
            filterable: false,
            width: 75
        },
        {
            field:"Freight",
            filterable: false,
            width: 75
        },
        {
            field: "OrderDate",
            title: "Order Date",
            width: 120,
            format: "{0:MM/dd/yyyy}"
        }, 
        {
            field: "ShipName",
            title: "Ship Name",
            width: 260
        },
        {
            field: "ShipCity",
            title: "Ship City",
            width: 150
        }
    ]
});

// Button should NOT make an ajax call...I just want to update the dataSource
$("#progress-enhance-me").click(function(){                           
    var grid = $("#grid").data("kendoGrid");
    var newDataSource =  new kendo.data.DataSource({
        type: "odata",
        transport: {
            read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
        },
        schema: {
            model: {
                fields: {
                    OrderID: { type: "number" },
                    Freight: { type: "number" },
                    OrderDate: { type: "date" },
                    ShipName: { type: "string" },
                    ShipCity: { type: "string" }
                }
            }
        },
        page: 1,
        pageSize: 5,
        serverPaging: true,
        serverFiltering: true,
        serverSorting: true
    });
    grid.setDataSource(newDataSource);  
});