How to make faster UI updation in jquery

Question

I have a table for showing production forecasting for user selected range of date. The table consists of 40 columns and around 1000 rows.

I have made some columns editable for making changes to the plan. This change will be reported in server using ajax and json[which property and what is the value]. The server will recalculate and change in table values are reported back to client in json format [column no, rowno,value].

I iterate through the json array and update the table like

$("#GridViewPlan tr:eq(" + (myRow) + ") td:eq(" + myCol + ")").text(val);

But my problem is the above sentence in for loop (ui updation) is taking time

How can I improve this architecture ? Is there anything like jquery library for Quick UI updation

Answer 1

You can use KnockoutJS another javascript library that uses MVVM pattern. it will make you data binding easy and faster. For more information please read the official documentation And the cool thing is you can use jQuery and KnockoutJS simultaneously. For tables with large numbers of record you may want to enable paging like this:

HTML

<div data-bind='simpleGrid: gridViewModel'> </div>

<button data-bind='click: addItem'>
    Add item
</button>

<button data-bind='click: sortByName'>
    Sort by name
</button>

<button data-bind='click: jumpToFirstPage, enable: gridViewModel.currentPageIndex'>
    Jump to first page
</button>

and the javascript:

<script>
    var initialData = [
        { name: "Well-Travelled Kitten", sales: 352, price: 75.95 },
        { name: "Speedy Coyote", sales: 89, price: 190.00 },
        { name: "Furious Lizard", sales: 152, price: 25.00 },
        { name: "Indifferent Monkey", sales: 1, price: 99.95 },
        { name: "Brooding Dragon", sales: 0, price: 6350 },
        { name: "Ingenious Tadpole", sales: 39450, price: 0.35 },
        { name: "Optimistic Snail", sales: 420, price: 1.50 }
    ];

    var PagedGridModel = function(items) {
        this.items = ko.observableArray(items);

        this.addItem = function() {
            this.items.push({ name: "New item", sales: 0, price: 100 });
        };

        this.sortByName = function() {
            this.items.sort(function(a, b) {
                return a.name < b.name ? -1 : 1;
            });
        };

        this.jumpToFirstPage = function() {
            this.gridViewModel.currentPageIndex(0);
        };

        this.gridViewModel = new ko.simpleGrid.viewModel({
            data: this.items,
            columns: [
                { headerText: "Item Name", rowText: "name" },
                { headerText: "Sales Count", rowText: "sales" },
                { headerText: "Price", rowText: function (item) { return "$" + item.price.toFixed(2) } }
            ],
            pageSize: 4
        });
    };

    ko.applyBindings(new PagedGridModel(initialData));
</script>

Here is the fiddle