Tablesorter issues when used with dragtable plugin.

Question

I'm using tablesorter plugin for column sorting and dragtable plugin for rearranging the column order. Also, I'll update the table content using ajax on some button clicks.

So the problem here is, when I rearrange the column order using drag and drop and then update the using ajax, the column sorting is not updated according to the column order. That is, when we click on say Column1, the sorting is done based on data in Column2.

I'm using this piece of code for ajax update. jQuery("#Table").trigger('updateRows');

I have also tried updating with jQuery("#emailListTable").trigger('updateAll'); In this case, column drag and drop stopped working.

Any other way to tell tablesorter plugin that column order is changed?

Plugin details: TableSorter : http://tablesorter.com/docs/ Dragtable : http://akottr.github.io/dragtable/

Mottie · Accepted Answer · 2015-02-07 18:47:28Z

1

Update: version 2.19.0 has been released. It includes a modified version of the dragtable widget - see the demo here.

The updateRows and updateAll methods are not available in the original tablesorter plugin, but are part of my fork of tablesorter.

In order to get the dragtable widget to work with the fork of tablesorter, you'll need to trigger an updateAll event from within the dragtable persistState callback function. Try out this demo - I had to add some extra HTML & CSS to add a dragable handle so the demo is working 100% (I hope).

CSS

.table-handle {
    background-image: url('data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAIAAAANAQMAAAC5Li2yAAAABlBMVEXd3d2ZmZl1DvVeAAAADklEQVQI12MAAQcsmAEAEFoBQSzdkZ8AAAAASUVORK5CYII=');
    background-repeat: repeat-x;
    height: 18px;
    margin: 0 1px;
    cursor: move;
}

HTML (single header cell example)

<th>
    <div class="table-handle"></div>
    <div class="sort">Header</div>
</th>

Script

$(function () {
    var $table = $('table')
        .dragtable({
            dragHandle: '.handle',
            persistState: function (table) {
                // remove div wrapper, or swapped header
                // contents will be replaced
                $table.find('thead .tablesorter-header-inner').contents().unwrap();
                $table.trigger('updateAll', false);
            }
        })
        .tablesorter({
            theme: 'blue',
            selectorSort: '.sort',
            widthFixed: true
        });
});

Make sure to also include jQuery UI (jQuery UI css is optional) because it is a dependency of the dragtable widget.

edited Feb 7, 2015 at 18:47

answered Jan 4, 2015 at 20:51

Mottie

86.8k30 gold badges132 silver badges248 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Mottie Over a year ago

Dragtable mod now available!

DDDD Over a year ago

There isn't a feature for drag & drop rows is there? To move a row up or down in the table? Maybe even a button to move it up or down one row at a time?

Mottie Over a year ago

@DDDD Check out the static row widget.

Roshdy Over a year ago

Is there any support for sticky headers with dragtable?

Collectives™ on Stack Overflow

Tablesorter issues when used with dragtable plugin.

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related