Kendo UI

jQuery + Kendo UI + MockJax

HTML

<script src="http://cdn.kendostatic.com/2011.3.1129/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.default.min.css">
<div id="grid"></div>

JavaScript

$("#grid").kendoGrid({
    dataSource: {
        type: "odata",
        transport: {
            read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
        },       
        pageSize: 10,
        serverPaging: true,
        schema: {
            model: {
                id: "OrderID"
            }
        }
    },
    dataBound: dataBound,
    height: 250,    
    pageable: true,    
    columns: [ "OrderID","Freight","ShipName","ShipCity" ]
});

function dataBound() {    
    var ds = this.dataSource, 
        start = ((ds.page() - 1) * ds.pageSize()) + 1,
        end = Math.min(ds.page() * ds.pageSize(), ds.total());

    this.pager.element.find(".k-status-text")
        .remove().end()
        .append('<div class="k-status-text">Displaying items ' + start + ' - ' + end + ' of ' + ds.total() + '</div>');
};