KnockoutJs with Jquery.tablesorter - Causing Duplicating Rows

Question

Any help with this? Im getting duplicate rows when using: KnockoutJs: http://knockoutjs.com/ and the jquery.tablesorter plugin: (http://tablesorter.com/docs/).

Basically, the first time everything loads... it works great. But if I replace or change the data bound to the knockout data after sorting the table... I start to get duplicate rows. Each seems to be creating and maintaining their own row set.

score 2 · Answer 1 · edited Oct 08 '13 at 14:24

You can clear array binded to table such as
```
YourViewModel.list.clearAll();
```
Clear table body
```
$(".gridtable").find('tbody').empty();
```
Update table sorter
```
$(".table_border").trigger("update");
```

So your data load function may look like this

self.Load = function () {
    self.list.removeAll();
    $(".gridtable").find('tbody').empty();
    $.ajax('/List', {
        data: $('#yourformname').serializeArray(),
        global: true,
        contentType: "application/json; charset=utf-8",
        type: "Get", contentType: "application/json",
        success: function (result) {
            var mappedList = $.map(result, function (item) { return new List(item) });
            self.List(mappedList );

            $(".table_border").trigger("update");

        }
    });
};

score 1 · Answer 2 · answered Jun 19 '12 at 14:24

1

I think there are two problems that are compounding each other. First of all you have an observable array but the items inside of the array are not ko.observable they are just regular JS objects. So if you change the items values in the tables the viewmodel does not get updated. Secondly I think you should forgo the tablesorter plugin and just sort the observable list in knockout and let the bindings do the work for you. You can find the info to sort the ko.observable arrays here.

answered Jun 19 '12 at 14:24

PlTaylor

7,345
11
52
94

In my example (I'll look into putting a fiddle up) I'm never changing the objects within the array, only changing which items are members of the array which is covered by the observable array. Sorting via KO is a good idea, but it would be a lot of code to implement it exactly as tableSorter does. – Arbiter Jun 19 '12 at 14:56
Please post your fiddle. Sorting in Knockout is pretty easy to accomplish. – PlTaylor Jun 19 '12 at 16:15
To implement all the features of tableSorter like being able to sort on arbitrary columns (what if I have dozens of columns?), sorting on multiple columns simultaneously using shift+click, custom sorting algorithms, etc. would be a lot of code. It is possible to create a computed observable for the sorted result, but it would be a ton of code to accommodate all this. I know how to solve this problem (clumsily) with Knockout, I want to know how to solve the problem with tableSorter. – Arbiter Jun 19 '12 at 18:07
You essentially have two different scripts trying to control what is in your DOM at one time. The only other suggestion I can think of off the top of my head is use Kendo UI grid with the knockout-kendo bindings and use it's sort function. – PlTaylor Jun 19 '12 at 18:54
Also see this SO post http://stackoverflow.com/questions/9703647/knockout-custom-binding-for-jquery-ui-sortable-strange-behavior for some direction – PlTaylor Jun 19 '12 at 19:46

score 0 · Answer 3 · edited Oct 20 '12 at 03:54

I have a solution for you. It might be slow though, but it works. The solution is to use a template and use jquery. each instead of foreach. Here is the code in html:

 // replace this div with the table
 <div id="peopleTemplateContainer"  data-bind="{template: 'peopleTemplate' }">

     <script id="peopleTemplate" type="text/html">
     <table id="dataGrid" border="1">
       <thead>
        <tr>
        <th><b>Sortable Header (sort click me)</b></th>
        </tr>
       </thead>
       <tbody >
          {{each(index,compliance) people()}}
        <tr >
            <td >${data}</td>
        </tr>
       {{/each}}
       </tbody>
     </table>
     </script>

KnockoutJs with Jquery.tablesorter - Causing Duplicating Rows

3 Answers3