ko.table

For now, only support server-side pagination.
Will come client-side soon ...
ko.table uses json to travel data over network wire.

Dependencies:

jquery-1.10.2.js
knockout-3.1.0.js

Note:

This is still under crafting.
Since ko.table is using JSON.stringify() for ajax post, need to reference json2.js for older browser clients.

How to create ko.table?

ko.table(ajaxUrl, pageSize, payload, sortValue)

What does ko.table have?

Properties	Type	Description
index()	ko.obserable():int	current page index
size()	ko.obserable():int	page size
data()	ko.observableArray()	current page data
recordsTotal()	ko.obserable():int	total number of records
pagesTotal()	ko.computed():int	total number of pages
payload	callback	return payload
sortValue	callback	return sort value
goToPage(targetIndex)	fun	page to target index
onNext()	fun	page to next index
onPrev()	fun	page to previous index
hasNext()	ko.computed():bool	check next page
hasPrev()	ko.computed():bool	check previous page
init()	fun	initialize the table

What does ko.table send to server-side?

{ start: <int>, lenght: <int>, payload: <obj>, sortValue: <obj> }

What does ko.table expect from server-side?

{ data: [], recordsTotal: <int> }

How to use ko.table?

Script

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/knockout-3.1.0.js"></script>
<script src="~/Scripts/ko.table.js"></script>
<script>
    // Page View Setup
    var ajaxUrl = $("#hidPostUrl").val();
    var pageSize = 2;
    var payload = { name: ko.observable("") };
    var sortValue = { key: ko.observable("Age"), direction: ko.observable("asc") };
    var payloadCallback = function () {
        return { name: payload.name() };
    };
    var sortValueCallback = function () {
        return { key: sortValue.key(), direction: sortValue.direction() };
    };

    function ViewModel() {
        var self = this;
        self.payload = payload;
        self.sortValue = sortValue;
        self.table = ko.table(ajaxUrl, pageSize, payloadCallback, sortValueCallback);
    };

    ko.applyBindings(new ViewModel());

Html (Index.cshtml)

<label>Name</label>
<input type="text" data-bind="value: payload.name" />
<button data-bind="click: table.init">Search</button>
<label>Sort by Age</label>
<select data-bind="options: ['asc','desc'], value: sortValue.direction"></select>
<button data-bind="click: table.init">Sort</button>
<hr />
<table>
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>StartDate</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: table.data">
        <tr>
            <td data-bind="text: Id"></td>
            <td data-bind="text: Name"></td>
            <td data-bind="text: Position"></td>
            <td data-bind="text: Office"></td>
            <td data-bind="text: Age"></td>
            <td data-bind="text: StartDate"></td>
        </tr>
    </tbody>
</table>
<hr />
<button data-bind="click: table.onPrev, enable: table.hasPrev">Prev</button>
<button data-bind="click: table.onNext, enable: table.hasNext">Next</button>

Page: <span data-bind="text: table.index"></span> of <span data-bind="text: table.pagesTotal"></span> |
Total Records: <span data-bind="text: table.recordsTotal"></span>

@Html.Hidden("hidPostUrl", Url.Action("ServerSidePaging"))

Server-Side (C# Asp.net Mvc)

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;

namespace Ko.Table.Controllers
{
    public class HomeController : Controller
    {
        // GET: Home
        public ActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public JsonResult ServerSidePaging(KoTable koTable)
        {
            var q = GetRecords();

            if (!string.IsNullOrWhiteSpace(koTable.Payload.Name))
            {
                q = q.Where(d => d.Name.ToLower().Contains(koTable.Payload.Name.ToLower()));
            }

            if (koTable.SortValue.Direction == "asc")
            {
                q = q.OrderBy(d => d.Age);
            }
            else
            {
                q = q.OrderByDescending(d => d.Age);
            }

            int recordsTotal = q.Count();
            var data = q.Skip(koTable.Start).Take(koTable.Length).ToList();

            return Json(new { data, recordsTotal });
        }

        private IEnumerable<Record> GetRecords()
        {
            yield return new Record() { Id = 1, Name = "Airi Satou", Position = "Accountant", Office = "Tokyo", Age = 33, StartDate = new DateTimeOffset(2008, 11, 28, 0, 0, 0, TimeSpan.Zero) };
            yield return new Record() { Id = 2, Name = "Bradley Greer", Position = "Software Engineer", Office = "London", Age = 41, StartDate = new DateTimeOffset(2012, 10, 13, 0, 0, 0, TimeSpan.Zero) };
            yield return new Record() { Id = 3, Name = "Ajj Bu", Position = "GM", Office = "London", Age = 50, StartDate = new DateTimeOffset(2012, 10, 13, 0, 0, 0, TimeSpan.Zero) };
        }
    }

    public class Record
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Position { get; set; }
        public string Office { get; set; }
        public int Age { get; set; }
        public DateTimeOffset StartDate { get; set; }
        public decimal Salary { get; set; }
    }

    public class Payload
    {
        public string Name { get; set; }
    }

    public class SortValue
    {
        public string Key { get; set; }
        public string Direction { get; set; }
    }

    public class KoTable
    {
        public int Start { get; set; }
        public int Length { get; set; }
        public Payload Payload { get; set; }
        public SortValue SortValue { get; set; }
    }
}

Other Knockout Table Paging Plugins:

thihasoehtet / ko.table

ko.table

About

Languages