saumya04 / jquery-datatables-row-reordering Goto Github PK

What steps will reproduce the problem?
1. Use FireFox 24+
2. Use a jquery datatable with widgets as cell entries

What is the expected output? What do you see instead?
I expect re-ordering of rows. That works, but the interesting side-effect is 
that none of the cells are editable.

What version of the product are you using? On what operating system?
1.2.1 ... Windows 7

Please provide any additional information below.

I'm able to get over this where the sortable(...) is applied to the tbody. Just 
remove the "disableSelection()". Firefox won't propogate the mouse events to 
the widgets if they aren't selectable (and the jquery-ui docs indicate that 
using this isn't a good idea anyway ... at least with text fields).

*Sometimes* when I drop a row it just "flies" back to where it came from, even 
though the response to the ajax request is 200 OK. Also, I'm not getting any 
errormessage and theres no javascript error in the firebug console. (This 
happens on both, outer and inner Table and to every row. If you wait a while 
and reload site, it sometimes disappears)

One thing that *sometimes* happens in the inner Table:
On dropping the row, no ajax request is being sent (firebug doesnt show me any 
network activity).


What steps will reproduce the problem?
I can't really say. It just happens from time to time without me changing 
anything.
My table looks like this:

<table id = "fbTable">
   <thead>
      <tr>
         <th>order</th>
         <th>Fachbereiche</th>
      </tr>
   </thead>
   <tbody>
      <tr id ="118">
         <td>11</td>
         <td>
            <div class="collapse">Mathematik/Informatik<span class="collapseButton"></span></div>
            <div>
               <table id = "Mathematik/Informatik" class="innerTable">
                  <thead>
                     <tr>
                        <th class ="hide">order</th>
                        <th><span class="addButton" id="18"></span></th>
                        <th>Dozent</th>
                        <th>exp</th>
                        <th>ppl</th>
                     </tr>
                  </thead>
                  <tbody>
                     <tr id="285">
                        <td class="hide">21</td>
                        <td>Grundfragen des Mathematik- und Informatikunterrichts</td>
                        <td>Schuster</td>
                        <td>ca. 10</td>
                        <td>100</td>
                     </tr>
                     <tr id="2229">
                        <td class="hide">22</td>
                        <td>Didaktik der Stochastik und Analytischen Geometrie</td>
                        <td>Schuster</td>
                        <td>???</td>
                        <td>???</td>
                     </tr>
                  </tbody>
               </table>
            </div>
         </td>
      </tr>
      <tr id ="15">
         <td>12</td>
         <td>
            <div class="collapse">Pädagogik<span class="collapseButton"></span></div>
            <div>
               <table id = "Pädagogik" class="innerTable">
                  <thead>
                     <tr>
                        <th class ="hide">order</th>
                        <th><span class="addButton" id="5"></span></th>
                        <th>Dozent</th><th>exp</th>
                        <th>ppl</th>
                     </tr>
                  </thead>
                  <tbody>
                     <tr id="263">
                        <td class="hide">216</td>
                        <td>Unterrichtsanalyse I</td>
                        <td>Munzert</td>
                        <td>ca. 15</td>
                        <td>120</td>
                     </tr>
                  </tbody>
               </table>
            </div>
         </td>
      </tr>
   </tbody>
</table>


And this is my JQuery:

$("#fbTable").dataTable( {
         "sDom": '<"top">rt<"bottom"flp><"clear">',
         "bPaginate": false,
         "bSort": false,
         "bFilter": false,
         "aoColumnDefs": [{ "bVisible": false, "aTargets": [ 0 ] }]
}).rowReordering({ 
          sURL:"updateFbOrder.jsp",
          sRequestType: "GET",
          fnAlert: function() { 
                alert("unable to change row order");
                               }
});

$(".innerTable").dataTable( {
        "sDom": '<"top">rt<"bottom"flp><"clear">',
        "bPaginate": false,
        "bSort": false,
        "bFilter": false
}).rowReordering({ 
        sURL:"updateLvOrder.jsp",
        sRequestType: "GET",
        fnAlert: function() { 
                  alert("unable to change row order");
                            }
});

What steps will reproduce the problem?
1. I tried to sort:)
2.
3.

What is the expected output? What do you see instead?


What version of the product are you using? On what operating system?


Please provide any additional information below.

i'm unable to put row reordering work.

i have created the table definitions with the table headers, them i call 

$().datatable().rowreordering();

the datatable is listed i can drag the row but the drop does't work. the row 
goes back to the same line.

i see that i'm missing the id attribute for each row, i'm using ajax binding. 
how can i set the attribute id to each row?

What steps will reproduce the problem?
1. Use Datatables. Scrollable in X. 
2. Use FixedColumns 
3. Drag elements

What is the expected output? What do you see instead?
Drag and drop action should reorder whole row instead it's reordering only the 
non-fixed part od the table (there are actually two <table>'s in dom because of 
using fixed column)

Live demo of the problem: http://live.datatables.net/fapobufe/2/edit

I see no commits to the source since July 2013. Is this project dead? Has 
anyone forked it yet?

I've added a callback method to trigger in non-ajax configurations when the 
user drops a row. This allows me to do my own ajax call to update the records 
with the new order. I couldn't work with the data given by the built-in ajax 
call so i needed to write my own.

I've attached this change and hope some form of it can be added to the source 
tree.

If this project is dead, and nobody has forked it, maybe I could. Hoping the 
original developer is still interested in this project.

What steps will reproduce the problem?
1. Add an input box to the sample default.html table that is on the wiki, I 
just replaced <td>Win 95+</td> on the first table row with <td><input 
type="number" size="3" maxlength="3" min="0" name="ib1" style="width: 55px;" 
value="" /></td>

What is the expected output? What do you see instead?
The textbox input is disabled in Firefox, you are unable to click in box and 
enter data into the field, worked in version 1.0.

What version of the product are you using? On what operating system?
RowReordering 1.2.1, Windows 7 x64, Firefox 23.0.1

Please provide any additional information below.
I upgraded from version 1.0 which worked fine so some change from 1.0 to 1.2.1 
has broken input boxes.

Thanks for sharing this great script. Any fork to work with DataTables 1.10?

Please provide an event interface.

The server expects reordering information in vastly different format than this 
plugin's built-in AJAX provides, and I cannot modify server-side code.

If I could receive an event when the user drops the row, I could make my own 
AJAX call.

I have the latest jQuery, jQuery UI, datatables, row-reordering plugin and 
nothing I am dong seems to allow drag and drop. I have no JS errors in the 
console. It just seems this plugin simply does not work. I've tried downgrading 
jquery and the UI to no avail. I am using your basic example to at least get 
this working.

What steps will reproduce the problem?
1. Installed
2. Called $('#myTable').dataTable().rowReordering();
3. Nothing happens

What is the expected output? What do you see instead?
I expect to be able to drag and drop but no dice. Datatables is initialized and 
works fine.

What version of the product are you using? On what operating system?
Latest Google Chrome on Mac OS Mountain Lion, also tried latest Chrome on Win 7 
x64

I cannot provide a demo as it is local but here is the html table snipped from 
the source.

<table id="myTable" class="table table-hover table-condensed datatable">
                <thead>
                <tr>
                    <th></th>
                    <th>Evaluation Title</th>
                    <th>Type</th>
                    <th>Questions</th>
                    <th>Actions</th>
                </tr>
                </thead>
                <tbody>
<tr data-position="1" id="463dc4f1-7a1e-4c70-aeed-f48189d7751e">
                   <td>1</td>
                   <td>Row two</td>
                   <td>Type</td>
                   <td>2</td>
                   <td>Delete</td>
               </tr>
                <tr data-position="2" id="5b327c1a-3699-4937-a3e7-5edbb6db128a">
                   <td>2</td>
                   <td>Row two</td>
                   <td>Type</td>
                   <td>2</td>
                   <td>Delete</td>
               </tr>
                </tbody>
            </table>

What steps will reproduce the problem?
1. Add a cell which has dropdown
2. Apply reordering function to it.
3.

What is the expected output? What do you see instead?
When we click on the dropdown it doesn't work.even it doesn't open.

What version of the product are you using? On what operating system?
1.10

When zebra striping is applied to a DataTable, after dragging and dropping an 
item to a new sort location, the row shading stays with the dropped row.  The 
zebra striping should redraw after the drop.

What steps will reproduce the problem?
1. Two or more rows

What is the expected output?
When a row is moved, at least two rows are affected. Only the row being moved 
receives a callback.
Example:
A table has 5 rows, with sort IDs 1,2,3,4,5.
After moving row 5 to the beginning, every row has its sortID changed 
(1=>2,2=>3,3=>4, 4=>5, 5=>1)
I would expect 5 ajax callbacks, one for each row affected

What do you see instead?
Only the dragged row receives a callback (Row 5 in our example, with 
fromPosition=5 and toPosition = 1)
The ajax server (database) never gets notified that the sort IDs of the other 
rows was affected by the change. After a row is moved, there is no way for the 
database to know what the new displayed values are. Data corruption occurs, as 
two rows may have the same sortID after only one row is updated.

What version of the product are you using? On what operating system?
1.0.0; tested on MacOSX 10.7, WInXP, WIn7, Chrome, FireFox,IE9, Safari

Please provide any additional information below.
http://jsfiddle.net/psmerd/x5LaN/1/# has been set up to mimic the examples 

What steps will reproduce the problem?
1. Create a datatable with rowgrouping and row-reordering plugin
2. Try and reorder a row

What is the expected output? What do you see instead?
Using the latest version of rowgrouping (1.2.7) causes the row-reordering 
plugin not to work.

It appears this is because the row-reordering plugin is looking for the 
"data-group" attribute in each row, but it is no longer added to each row in 
the rowgrouping plugin.

As a workaround, I need to go back and use version 1.1.6 of the rowgrouping 
plugin.

Example with Version 1.1.6 working: http://live.datatables.net/onigip/2

Example with Version 1.2.7 not working: http://live.datatables.net/onigip

Hi,
I try manytimes for solving ie display issue at time of drag and drop 
row-reordering but not solved.

So,Please give me suggestion how can i solve row-reordering issue facing in ie 
8.

Thanks
Jaydipsinh gohil

What steps will reproduce the problem?
1. Attempt to drag a row in IE8 when a scollbar is present
2. The scroll bar does not move
3.

What is the expected output? What do you see instead?

Scrollbar does not move, works fine in Firefox and Chrome

What version of the product are you using? On what operating system?

IE8, Windows XP


Please provide any additional information below.

See this post for more details, and a workaround: 
http://stackoverflow.com/questions/12462693/scroll-bar-issue-in-ie-when-row-reor
dering-with-data-tables

Hi,

First thank you for this wonderful plugin.

This plugin only have a callback function on error, I add a success callback 
function to notify user.

Attach new file with minor changes I made.

Sorry to be so brief, but my English is very bad.

Thanks.

I'm using this add-on with server-side Data and I try to figure out what would 
be a workaround for my case. A similar issue reproduced the problem but mine 
differs a bit

The suggested on that case was like using

  "fnRowCallback": function (nRow, aData, iDisplayIndex) {
            nRow.setAttribute('id', aData.RowOrder);  //Initialize row id for every row
        }
 but what is if id is in bounded inside of html markup like
<code>
direction   forward
fromPosition    <label class="checkbox"><input type="checkbox" 
name="cbSelection[]" value="17"><i></i></label>
group   
id  undefined
toPosition  NaN

</code>

than is not working and how would I declare against id somthing different like 
position which is present in my mysql table

Hi,

What steps will reproduce the problem?

I create a Table and enable row ordering and everything is ok. My table has 
some checkboxes, which sends requests with AJAX by changing. If I change row 
ordering with this PlugIn, the checkbox values are incorrect after rerendering. 
Checkboxes which should be checked aren't and reverse.
It seems to me that there is an internal state of each row which contains the 
initial state.


What is the expected output? What do you see instead?
I see the initial state, I expect that the updated checkbox values will be 
correct.


What version of the product are you using? On what operating system?
JQuery 1.11.1
JQueryUI 1.11.0
Datatables 1.10.3
rowReordering 1.2.1


Kind regards

What steps will reproduce the problem?
1.
2.
3.

What is the expected output? What do you see instead?


What version of the product are you using? On what operating system?


Please provide any additional information below.

reordering now working with my datatable

What steps will reproduce the problem?
1. create one simple html table and apply reordering on it using  reordering 
function

should not give $("tbody", oTable).sortable is not a function code error


following is the code.

<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<%@ page import="com.bnpparibas.raid.common.util.ICommonConstants"%>

<script src="content/scripts/itfeatures/code/code.js" 
type="text/javascript"></script>
<script type="text/javascript" 
src="content/scripts/common/html.encoder.js"></script>
<script type="text/javascript" language="javascript" src="<s:url 
value="/content/jquery/core/jquery-ui-1.8.13.custom.min.js"/>"></script>
<script type="text/javascript" language="javascript" src="<s:url 
value="/content/jquery/core/jquery.dataTables.rowReordering.js"/>"></script>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/cupertino/jquery-ui-1.8.13.custom.css" rel="stylesheet" 
type="text/css" />

<script type="text/javascript">
$(document).ready(function() {

    $(document).ready(function () {
        $('#example').dataTable({
                                    bJQueryUI: true,
                                    "sPaginationType": "full_numbers"
                                })
                     .rowReordering();
    }); 


});
</script>


<html>
<body>

<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
    <thead>
        <tr>
        <th></th>
            <th>Rendering engine</th>
            <th>Browser</th>
            <th>Platform(s)</th>

            <th>Engine version</th>
            <th>CSS grade</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
        <th></th>
            <th>Rendering engine</th>

            <th>Browser</th>
            <th>Platform(s)</th>
            <th>Engine version</th>
            <th>CSS grade</th>
        </tr>

    </tfoot>

    <tbody>

        <tr data-position="1" class="odd_gradeX" id="100"><td>1</td>
            <td class="read_only"> A Trident(read only cell)</td>
            <td>Internet Explorer 4.0</td>
            <td>Win 95+</td>
            <td class="center">4</td>

            <td class="center">X</td>
        </tr>
        <tr data-position="2" class="even_gradeC" id="101"><td>2</td>
            <td>Trident</td>
            <td>Internet Explorer 5.0</td>
            <td>Win 95+</td>

            <td class="center">5</td>

            <td class="center">C</td>
        </tr>
        <tr data-position="3" class="odd_gradeA" id="102"><td>3</td>
            <td>Trident</td>
            <td>Internet Explorer 5.5</td>

            <td>Win 95+</td>
            <td class="center">5.5</td>

            <td class="center">A</td>
        </tr>   

        </tbody>
    </table>

</body>

</html>

When hovering over a row, the cursor does not change. It is not obvious that 
users have the ability to drag and drop rows.

This is a jquery ui bug with sortable where tr elements do not maintain the 
width of their child elements when being sorted.

A solution was presented here: 
http://stackoverflow.com/questions/1307705/jquery-ui-sortable-with-table-and-tr-
width

I've attached a patched copy of datatables row reordering with the solution 
from stackoverflow.

Cheers,
Rob

What steps will reproduce the problem?
1. initialize two dataTables on single web page with rowReordering()
2. Go to web page

What is the expected output? What do you see instead?
1. Drag and drop rows on first table - works fine
2. Drag and drop rows on second table - quirky behavior, does not work



What version of the product are you using? On what operating system?
JQuery 1.7.2 or 1.7.3
JQery-UI-1.8.21.custom.css
JQery-UI-1.8.21.custom.min.js
jquery.dataTables.js    v1.9.1
Windows XP and Windows Server 2003


Please provide any additional information below.

I'm using Chrome, and there are no errors in the console.

Each row has an Id and data-position. Jquery UI 1.10 is loaded on the page.

When I use drag&drop to reorder datatable I have this error from jquery:

Error: Syntax error, unrecognized expression: #

...){var 
t=e.nodeName.toLowerCase();return"input"===t&&"button"===e.type||"button"=... 


I'm using rowReordering 1.2.1  and jquery 1.9.1 from googleapis.


This is my call:

$('#datatableproyectos').dataTable({
            "bProcessing": true,
            "sAjaxSource": '/admin/load/loadinfo.php?accion=listarproyectos&tipo=' + tipoproyectos,
            "aoColumns": [
                null,
                null,
                null,
                { "bSortable": false },
                { "bSortable": false }
            ],
            "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
                $('td:eq(2)', nRow).addClass('hidden-phone');
                $('td:eq(3)', nRow).addClass('hidden-phone');

                // Apply iCheck to checkbox
                $('td input[type="checkbox"]', nRow).iCheck({
                    checkboxClass: 'icheckbox_minimal-grey',
                    radioClass: 'iradio_minimal-grey',
                    increaseArea: '20%' // optional
                });
            }
        }).rowReordering({ 
                sURL:"/admin/proyecto/ajax_acciones.php", sRequestType: "GET", fnAlert: function(message) {

                alert("order"); 

                } 
            });


It's a problem with jquery or my call is wrong?


Thanks!!!!

Hi,
First let me say this is a pretty amazing plug-in and exactly what I have been 
searching around the "interwebs" for.  This is not an issue exactly just a 
feature request.  I have noticed this plugin does not work on touch devices 
like the android browser or Google's chrome browser in android, I do not have a 
iOS device to try.  Would it be possible to add the option to use a button that 
can be pressed and dragged, not sure if that would fix the issue but it seems 
like touching the screen does not activate a click event needed to move the 
rows.

Cheers,
Luke

What steps will reproduce the problem?
1. is not working if using 
https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
2.
3.

What is the expected output? What do you see instead?


What version of the product are you using? On what operating system?


Please provide any additional information below.

I am not using this to reorder per say, I am using this plugin for it's drag 
and drop capabilities. As you can see in my example, I am able to drag and drop 
the droppable divs to add to the tree. Can I do this with the datatables rows? 
http://jsfiddle.net/nwntpd15/14/

What steps will reproduce the problem?
1. Add a column to the table which has dropdown.
2.
3.

What is the expected output? What do you see instead?
Even if we add a dropdown to the cell, reordering should work properly.

What version of the product are you using? On what operating system?
1.10

The CSS used in the table should change when using the reordering plugin:

Sorting columns is no longer possible, thus
  - table.display thead th {
    ...
    cursor: pointer;
    ...
    }
  - <th class="sorting"
should not be used.

Hi, 

I'm tryng to applicate row reordering plugin to a datatable which receive data 
from ajax callback. All seems ok but when I move a column from her original 
position to another the alternance for even and odd rows are break because this 
row mantain her original color. 

What steps will reproduce the problem?
1. Simply try to init }).rowReordering();
2.
3.

What is the expected output? I should be able to reorder.
What do you see instead? Undefined is not a function.


What version of the product are you using? 1.2.1
On what operating system? Linux


Please provide any additional information below.

What steps will reproduce the problem?
1. Drag & drop a record to next/previous page

What is the expected output? What do you see instead?
When we Drag & drop a record to next/previous pager, is it possible to move the 
record to the next/previous page (top of the page, preferred).

What version of the product are you using? On what operating system?
r31, Windows 7

Please provide any additional information below.
Is it possible to move a record to the next/previous page?

What steps will reproduce the problem?
1. create 2 different datatables on a given page
2. each table uses rowReordering
3. attempt to drag and drop a row with one of the tables
4. get this error:  TypeError: n.aoData[t] is undefined

What is the expected output? What do you see instead?
I expect that I should be able to re-order rows within same same table 
regardless of the number of datatable-enabled tables on my page.  Instead, I 
get an error after dropping row to new position.  The server call is never 
made, and the rows are not reordered as a result of dropping.  However, if a 
single datatable with row-reordering is on my page, then everything works as 
expected.

What version of the product are you using? On what operating system?
jquery.dataTables.min.js  Version: 1.9.2
jquery.dataTables.rowReordering.js Version: 1.0.0.

Please provide any additional information below.

I am setting the sURL property to make a server call when the rows are 
reordered.  This is working as expected.  However, my requirements demand that 
all ajax calls contain a security token.  Would it be possible to add a 
callback function that executes immediately before the ajax call?  Ideally, the 
args for this function would be the json object:
{ id: ui.item.context.id,
  fromPosition: oState.iCurrentPosition,
  toPosition: oState.iNewPosition,
  direction: oState.sDirection,
  group: sGroup
}
currently used by the ajax call, so I could append my security token to it.

I could understand that you may not want to expose this data, so another option 
could be to pass the callback function an empty json object (or maybe it could 
at least contain the row Id) to be manipulated, then you could add the 
to/fromPosition and other data after the callback executes.

Thanks