How to create sortable table rows using jQuery

Question

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%;
    }

$(function (sort) {...}); simply makes sort an alias for jQuery within the block. The next function(sort) expects a parameter, and the last function(sort) makes sort equivalent to the index of each ui.children(). None of these functions refer to the sort parameter. We'll need to see more code. — Rick Hitchcock
– Rick Hitchcock, Commented Jul 10, 2016 at 13:35
Thanks for quick response. I've updated my question to include the rest of the code. — jmiller
– jmiller, Commented Jul 10, 2016 at 14:06

Chaitanya Kale · Accepted Answer · 2016-07-10 13:27:49Z

1

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.

answered Jul 10, 2016 at 13:27

Chaitanya Kale

2411 silver badge7 bronze badges

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

2 Comments

jmiller Over a year ago

This is just the function. It is within the document.ready call. The sorting applies to #field-wrapper.sortable

Rick Hitchcock Over a year ago

$(function(...) is shorthand for $( document ).ready(). See learn.jquery.com/using-jquery-core/document-ready. So this answer is somewhat correct, although a function isn't actually being defined within the block.

jmiller · Accepted Answer · 2016-07-10 14:31:06Z

0

I have got it it working!

jQuery:

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

answered Jul 10, 2016 at 14:31

jmiller

59811 silver badges29 bronze badges

1 Comment

jmiller Over a year ago

Note: you need both the following jQuery links for it to work:

<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <script src="//code.jquery.com/jquery-2.2.4.min.js"></script>

Collectives™ on Stack Overflow

How to create sortable table rows using jQuery

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related