CODEWITHSUNDEEP
jqueryhtml-tablejquery-ui-sortable
jmiller
jmiller

Reputation: 588

How to create sortable table rows using jQuery

I'm trying to create a .sortabletable using jQuery. The fixWidthHelper class preserves the table column widths. (I've removed some of the HTML)

Table HTML:

<table class = "table table-bordered" >
           hr content here...
    <tbody id = "field_wrapper">
            <tr>
              <td id = "move">...</td>
              <td id = "move">...</td>       
        </tbody>
      </table>

jQuery:

    $(function (sort) {
    sortable_tables.sorting_field_table();

});

var sortable_tables =
{
    sorting_field_table: function(sort)
    {
        $('#field_wrapper').sortable({
        placeholder: "drop",
        helper: sortable_tables.fixWidthHelper
        }).disableSelection();
    }
    fixWidthHelper: function(e, ui) {
        ui.children().each(function(sort) {
            $(this).width($(this).width()); 
        });
        return ui;
    }
});

CSS:

#move{ margin-left: 0px; padding-right:10px; cursor: move;}
.drop { 
    outline: thin dashed #CCC !important;
    background-color:#CCC;
    width:100%;
    }

Upvotes: 1

Views: 1049

Answers (2)

jmiller
jmiller

Reputation: 588

I have got it it working!

jQuery:

$(function() {
  $( "#field_wrapper" ).sortable({
    placeholder: "drop"
  });
  $( "#field_wrapper" ).disableSelection();
});

Upvotes: 0

Chaitanya Kale
Chaitanya Kale

Reputation: 241

The first block of your code is just defining a function on document.ready but it is not called anywhere.

Also, I don't see anything here that is actually performing any sorting.

Upvotes: 1

Related Questions