jQuery : Draggable Table Columns and Sortable Colums? 1

[1DMF]

Hi,

I'm trying to use JQuery : dragtable & dataTables plugins.

If I use just dragtable or just dataTables it's fine, however I seem unable to get them to work together?

Is it possible to have not just draggable table columns but also sortable table columns?

Here is my demo page : Draggable Table Demo

Thanks,
1DMF

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music

 

[mmerlinn]

You might try Sortable Table in combination with your JQuery code and see how it works.

mmerlinn

http://mmerlinn.com

Poor people do not hire employees. If you soak the rich, who are you going to work for?

"We've found by experience that people who are careless and sloppy writers are usually also careless and sloppy at thinking and coding. Answering questions for careless and sloppy thinkers is not rewarding." - Eric Raymond

 

[jpadie]

I suspect it is because both scripts are binding on a click in the column header and then stopping event bubbling. you could probably work around that by adding a button into the th tags and biding the resort to the buttons; or even perhaps experiment by putting one bit of code before the other (might work if one script were better behaved than the other).

but there is an easier solution in that a third party plugin already exists for dataTables that allows for drag and drop column reordering.

http://www.datatables.net/extras/thirdparty/ColReorderWithResize/

 

[1DMF]

Thanks Justin,

I guess in some ways it's not quite as funky, as you only pick up the heading and move it, where as the dragtable shows you pick up the column and a sunken section clearly showing where you are moving it to.

But then again, I can't get clickable sort to work with it, so as least this dataTables drag works with the sort.

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music

 

[jpadie]

I think that's just styling the cloned set of nodes. the way most of these draggable systems work is that they take what you have selected and clone the nodes. in this case selecting a column is not that straightforward so they probably traverse the table and append the relevant column cells to a dummy table node (wrapped in dummy rows). Or even keep them as divs with a defined width (which would work just as well).

so once you have the 'cloned' node that you then position absolutely you are free to style it as you want. making the table cells look sunken is just a matter of contrasting colours and a ridged border. This can be applied either to a set of stacked divs or table cells without a problem.

Equally although it may look as though you only pick up the heading, all that means is that is the only node that is 'cloned'. so if you wanted to pick up more, then just add nodes to the cloned node. Doing so (and styling them) would not break the code library at all; and would be easy to do.

 

[1DMF]

so if you wanted to pick up more, then just add nodes to the cloned node.

How do I go about doing that?

The only code I am using so far to make it work is

    <script type="text/javascript">
        // <![CDATA[     
        $(document).ready(function(){
            $('#table1').dataTable({
                    "sDom": "Rlfrtip"  
                });           
        });
        // ]]> 
        </script>

I don't think it just colours the cloned nodes, the other columns move to make a space for the dragged column , have a look :

http://akottr.github.io/dragtable/

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music

 

[jpadie]

looking at your original example again, you could make the dragtable script work by: if you want sorting AND dragging to work just on the table heading, you will have to include another element there. OR set one to double click and the other to click (although this latter solution is a bit more complex as the dragtable script binds not to a click event but to a mousedown event. so you would need to implement a finite state machine to determine whether that were an effective single or double click - not difficult but a hassle).

e.g

    <thead>
        <tr>
            <th>Heading 1<button class="table-handle"><-></button></th>       
            <th>Heading 2<button class="table-handle"><-></button></th>
            <th>Heading 3<button class="table-handle"><-></button></th>
        </tr>            
    </thead>

$(document).ready(function(){
            $('#table1').dataTable();
            $('#table1').dragtable();            
        });

you can also stop datatables from doing anything on a click to th and rebind the event to the wee up and down arrows using fnSortListener.

something like this (wholly untested and there is probably a more elegant way of doing this through the api)

$(document).ready(function(){
    $('#table1').dataTable(); //initiate data tables
    var sortableTable = $('#table1 th').off('click.DT'); //turn off sorting on table header
    $('#table1 th').each(function(i, v){ //check through table headers
        var t = $(this).find('.DataTables_sort_icon');  //find sortable icons (will only appear on visible headers and those with sortability turned on)
        if (t.length > 0) {  
            sortableTable.fnSortListener($(t).get(0), i);  //apply a new listener to this column index
        }
    });
    $('#table1').dragtable();  //initiate table dragging
});

p.s. i have no idea at all whether this might break everything. end the world etc etc.

 

[1DMF]

Well I've been messing with dataTables and I'm just going round in circles!

I've copied everything, but I just can't seem to make mine look anything like the demo?

http://homeloanpartnership.com/jQuery/test_drag_col.html

http://datatables.net/

Why doesn't mine look like the demo when using the same CSS and UI theme?

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music

 

[jpadie]

I'd say the main reason is that you have mistyped the css file in your import statement

[URL unfurl="true"]http://homeloanpartnership.com/jQuery/css/site_jui.ccss[/URL]

if you change that to css it all changes. although it's still bust in Firefox. but first things first ...

 

[1DMF]

thanks, copy/paste issue, but it's bust in IE also!

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music

 

[jpadie]

when I replace your styles with direct links to those of the demo site, it works ok in all browsers that i have (not IE as I am on a mac).

the table itself looks properly rendered. however the wrappers for the search are not.

could you try
1. fixing the top issue (incorrect copy and paste of css files - NB all subsidiary resources must also be copied - like button images etc).
2. switch off the reordering plugin (I note that the demo does not have the styled search wrapper either).

 

[1DMF]

OK, I seem to have got it working if I point direct to the website CSS, but not if I use the CSS that came with the download zip?

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music

 

[jpadie]

the css refers to images using relative urls (i.e. relative to the location of the css file). so if you are going to take the css through copy and paste you must either (i) edit all the relative urls or (ii) copy also all the other resources to the same relative folder.

it may be easier to roll a theme yourself.

 

[jpadie]

I note that you disabled the reordering script. if you reenable that do you again lose the styling of the search bar?

 

[1DMF]

yes, well worked out, this is the problem.

    "sDom": 'Rlfrtip'

As soon as I add draggable columns, it messes up the formatting of the search area and bottom!

It seems this jquery plugin isn't compatible with itself!

Works :

http://homeloanpartnership.com/jQuery/test_drag_col2.html

Doesn't Work :

http://homeloanpartnership.com/jQuery/test_drag_col.html

FF inspector tells me it is this element

<div class="fg-toolbar ui-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"> … </div>

Any ideas if this can be fixed?

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music

 

[1DMF]

Which actually - if you visit the plugin site :

http://datatables.net/extras/colreorder/

It doesn't work their either - back to the drawing board!

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music

 

[jpadie]

this might help

 

[jpadie]

hmm... poor posting skills there!

i meant 'THIS' might help ...

$('#table1').dataTable({
                    [s]"sDom": "Rlfrtip"[/s] 
                   [COLOR=#EF2929] "sDom": 'R<"H"lfr>t<"F"ip>',[/color]
		    "bJQueryUI": true, //optional 
	 	    "sPaginationType": "full_numbers" //optional
                });

 

[1DMF]

That's cracked it! Thanks Justin, can you explain why that fixed it and how you even worked that out as...

"sDom": 'Rlfrtip'

...is what they have on there website for usage!

As an aside, any reason when viewed locally the drop shadow around the entire table doesn't show, but when viewed online it does?

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music

 

[1DMF]

found it!

http://datatables.net/usage/options#sDom

lfrtip (when bJQueryUI is false) or <"H"lfr>t<"F"ip> (when bJQueryUI is true)

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music