Add jQuery UI Sortable feature to a table dynamically

Question

I have a table(actually it is a part of custom framework provided by my company, so I don't control its code) which is populated through ajax. I want to add jQuery sortable functionality to its rows except for the first row(which has filters in it) in the tbody. This feature will be applied when the table loads, I can use the callback functionality(provided by the framework) to add the feature dynamically when ajax is complete. What can I do to go about this?

<div class="divGridContent box-body table-responsive" id="divSimilarProductGroupGridContent">
    <table class="tblGrid table table-bordered table-striped table-hover" id="tblSimilarProductGroup" cellpadding="0" cellspacing="0">
        <thead>
            <tr>
                <th class="thSelectAll" width="30px"><input name="checkgroup" type="checkbox" class="check" id="SimilarProductGrouptopcheckbox"> </th>
                <th style="display: none;" width="" datafield="a_similarproductgroupid" filtermapping=""></th>
                <th style="min-width:;" datafield="a_similargroup" filtermapping="a_similargroup" class="sorting_asc">Similar Product Group</th>
            </tr>
        </thead>

        <tbody>
            <tr class="trFilter">
                <td>&nbsp;</td>
                <td width="" field="a_similargroup"><input ftype="%LIKE%" id="a_similargroup" type="text" style="width:100%;" value=""></td>
            </tr>

            <tr id="trSimilarProductGroup1">
                <td class="tdSelect"><input type="checkbox" class="check" id="chk1"> </td>
                <td width="" field="a_similarproductgroupid" style="display: none;">1</td>
                <td width="" field="a_similargroup">1,22,24,32,55,89,90,91</td>
            </tr>

            <tr id="trSimilarProductGroup2">
                <td class="tdSelect"><input type="checkbox" class="check" id="chk2"> </td>
                <td width="" field="a_similarproductgroupid" style="display: none;">2</td>
                <td width="" field="a_similargroup">78,89,90</td>
            </tr>

            <tr id="trSimilarProductGroup3">
                <td class="tdSelect"><input type="checkbox" class="check" id="chk3"> </td>
                <td width="" field="a_similarproductgroupid" style="display: none;">3</td>
                <td width="" field="a_similargroup">89,98</td>
            </tr>

            <tr id="trSimilarProductGroup4">
                <td class="tdSelect"><input type="checkbox" class="check" id="chk4"> </td>
                <td width="" field="a_similarproductgroupid" style="display: none;">4</td>
                <td width="" field="a_similargroup">23,34,78,90,57768</td>
            </tr>
        </tbody>
    </table>
</div>

Your .trFilter row is not balanced, it needs a colspan in the second cell. — Ja͢ck
– Ja͢ck, Commented Mar 13, 2015 at 6:17
oh no, one of the td s in rest of the tr s is "display:none", so that is not a problem, table rendering is correct and its part of the framework. — Shekhar Joshi
– Shekhar Joshi, Commented Mar 13, 2015 at 6:22

Ja͢ck · Accepted Answer · 2015-03-13 06:18:52Z

1

You can configure which items can be moved around:

$("#tblSimilarProductGroup tbody").sortable({
  items: "tr:not(.trFilter)"
});

answered Mar 13, 2015 at 6:18

Ja͢ck

174k39 gold badges269 silver badges317 bronze badges

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

1 Comment

Shekhar Joshi Over a year ago

this works just fine, I have this problem now: stackoverflow.com/questions/1307705/… thank you very much

Collectives™ on Stack Overflow

Add jQuery UI Sortable feature to a table dynamically

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related