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

Question

看看我的小提琴在这里

不幸的是，Kendo Grid似乎没有提供一个良好的SEO本地解决方案(见这里)。但我想我应该试一试，看看我能做些什么。这是我目前所看到的:

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

1. 用于搜索引擎优化的已有HTML表(参见fiddle的HTML部分)
2. 来自HTML表的相同数据，但作为JSON (参见fiddle的顶部js部分)。这是为了让Kendo显示正确的页面和总页面(如果我只是让它单独转换HTML网格，它不会这样做!!)。
3. 所有后续调用将通过ajax处理。(见提琴中网格输出上方的"progressive enhance me"按钮)

为了保持一切干净整洁，我有一个服务器端脚本来生成HTML表和JSON。我只是把我的服务器端变量插入到我的视图(页面)，一切都很好地结合在一起。

但是我还有一个问题。我需要将数据源更新为远程url，如按下"Progressive Enhance Me!"按钮时所示。当按下按钮时，就会进行不必要的ajax调用。在实际的应用程序中，这种不必要的初始ajax调用可能代价高昂，其中冗余的服务器端数据库查询可能会减慢页面的速度。是否有任何方法我可以更新数据源没有ajax调用正在进行?

(我也愿意接受任何更好的方法来实现Kendo Grid的逐步增强)。

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);  
});

编辑:

我尝试了另一种方法，使用requestStart呼叫。请参阅，此处查看。然而，我不认为这会起作用，因为我没有办法转移最后一次点击(页码点击，或排序标题点击等)到新的数据源。

Answer 1

因为我需要网格对SEO友好，所以我最终使用jqgrid成功地实现了渐进式增强。请看我的回答:Jqgrid &;渐进式增强:成功地从HTML，本地JSON，远程JSON，但寻呼机没有正确启动?

我也可以使用这个样式来与Bootstrap 3一起工作。

更新:
我现在用的是这个的分叉版本:https://github.com/wenzhixin/bootstrap-table