0

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>
Shekhar Joshi
  • 958
  • 1
  • 13
  • 26
  • Your `.trFilter` row is not balanced, it needs a colspan in the second cell. – Ja͢ck Mar 13 '15 at 06: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 Mar 13 '15 at 06:22

1 Answers1

1

You can configure which items can be moved around:

$("#tblSimilarProductGroup tbody").sortable({
  items: "tr:not(.trFilter)"
});
Ja͢ck
  • 170,779
  • 38
  • 263
  • 309
  • this works just fine, I have this problem now: http://stackoverflow.com/questions/1307705/jquery-ui-sortable-with-table-and-tr-width?rq=1 thank you very much – Shekhar Joshi Mar 13 '15 at 06:26