ColReorder dragging

ilatine · April 2015

Hello,

The "ColReorder" works great for me but when the column is dragged, it does not show it as being dragged. There's not outline or anything showing that's it's being dragged and dropped, even though the column does get moved.

Any ideas on how to fix?

Thanks!

allan · April 2015

Can you link to the page in question please. As you will be able to see in the example here the header should be dragged with the cursor.

Allan

ilatine · April 2015

Unfortunately, I can't. It's on our intranet site. I can't even duplicate the problem on my site.

Do you know what controls it in the CSS or js libraries?

allan · April 2015

Sure, I wrote the code :-). Have you included both the ColReorder Javascript and CSS files? There is a clone occurring of the header cell and it is repositioned with the mouse as it is dragged.

I'm afraid that without a test case there is really very little I can do to help other than to suggest that you include the JS and CSS for the library.

Allan

ilatine · April 2015

Thanks! I'll give that a try.

To come think about it, I integrated both ColVis and ColReorder. Maybe I included one CSS and not the other.

ilatine · April 2015

Would it work if I integrated "FixedHeader" with "ColVis" and "ColReorder"? Is there anything special I would have to do besides adding the libraries?

Thanks for your help.

allan · April 2015

It should work. There is an example of FixedHeader and ColReorder here.

Allan

ilatine · April 2015

What I'm asking is, will all three (fixheader, colvis and coreorder) work together?
Sorry for the confusion.

allan · April 2015

Should do. I don't see any reason why not.

Allan

ilatine · April 2015

Hi Allan,

Here's my site: http://isaac.issharepoint.com/ICTT/Shared%20Documents/modalTable.aspx

I tried implementing all three but I get an error. Colvis and ColReorder seem to work but not fixedHeader.

Here's the error I get: SCRIPT445: Object doesn't support this action
The error points to this line "window.fc = new $.fn.dataTable.FixedColumns( table, {"

<!DOCTYPE html>

<link rel="stylesheet" type="text/css" href="/ICTT/SiteAssets/media/css/jquery.dataTables.css" />
<link rel="stylesheet" type="text/css" href="/ICTT/SiteAssets/ColReorder/css/dataTables.colReorder.min.css" />
<link rel="stylesheet" type="text/css" href="/ICTT/SiteAssets/FixedHeader/css/dataTables.fixedHeader.css" />
<link rel="stylesheet" type="text/css" href="/ICTT/SiteAssets/ColVis/css/dataTables.colVis.css" />

<script type="text/javascript" src="/ICTT/SiteAssets/media/js/jquery.js"></script>
<script type="text/javascript" src="/ICTT/SiteAssets/media/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="/ICTT/SiteAssets/ColReorder/js/dataTables.colReorder.min.js"></script>
<script type="text/javascript" src="/ICTT/SiteAssets/ColReorder/js/dataTables.fixedHeader.js"></script>
<script type="text/javascript" src="/ICTT/SiteAssets/ColVis/js/dataTables.colVis.js"></script>

<html>
<head>
    <title></title>

<script>
    $(document).ready(function(){
        window.table = $('#example').DataTable({        
        "sDom": 'RC<"isaac">lfrtip',
        scrollX: true,
        scrollCollapse: true,
        colReorder: {
            fixedColumnsLeft: 1,
            fixedColumnsRight: 1
        }
        });

        window.fc = new $.fn.dataTable.FixedColumns( table, {
            leftColumns: 1,
            rightColumns: 1
        });
        getListItems('/ICTT','IceCreamTrucks','complete', 'failure');
    });


function getListItems(url, listname, complete, failure) {

    // Executing our items via an ajax request
    $.ajax({
        url: url + "/_api/web/lists/getbytitle('" + listname + "')/items",
        method: "GET",
        headers: { "Accept": "application/json; odata=verbose" },
        success: function (data) {
            complete(data); // Returns JSON collection of the results
        },
        error: function (data) {
            failure(data);
        }
    });
function complete(data) {

var tblData= $('#example').DataTable();

for(var i =0; i < data.d.results.length; i++) {
var tblData = $('#example').DataTable();

   var rowNode = tblData
    .row.add([ data.d.results[i].Title, data.d.results[i].Town, data.d.results[i].County, data.d.results[i].NumberOfTrucks ]).draw();
}


$("#dtData").append(tblData);


 //alert("Completed successfully.");
 }
function failure(data) {
 alert("Operation failed.");
 }

}


</script>
</head>
<body>

<input type="button" value="Close" onclick="window.frameElement.cancelPopUp(); return false;" />
<table id="example" class="display nowrap dataTable dtr-inline" cellspacing="0" width="100%" role="grid" aria-describedby="example_info" style="width: 100%;">
    <thead>
        <tr role="row">
            <th class="sorting_asc" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Name: activate to sort column descending" style="width: 137px;">State</th>
            <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Position: activate to sort column ascending" style="width: 215px;">Town</th>
            <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Office: activate to sort column ascending" style="width: 102px;">County</th>
            <th class="dt-body-right sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Age: activate to sort column ascending" style="width: 42px;">Number of Trucks</th>
        </tr>
    </thead>
    <!-- <tfoot>
        <tr>
            <th rowspan="1" colspan="1">Name</th>
            <th rowspan="1" colspan="1">Position</th>
            <th rowspan="1" colspan="1">Office</th>
            <th class="dt-body-right" rowspan="1" colspan="1">Age</th>
        </tr> -->
    </tfoot>
    <tbody id="dtData">

    </tbody>
</table>

</body>

</html>

Any ideas?

ilatine · April 2015

I made the following changes but still get the same error:

$(document).ready(function(){
        var table = $('#example').DataTable({       
        dom: 'RC<"isaac">lfrtip'        
        })
        
        getListItems('http://isaac.issharepoint.com/ICTT','IceCreamTrucks','complete', 'failure');
        
        new $.fn.dataTable.fixedHeader( table );
    });

allan · May 2015

On the link and get a few authentication warnings, then a table with no data and no Javascript errors in the console. Do I need to log in?

new $.fn.dataTable.fixedHeader( table );

Should be:

new $.fn.dataTable.FixedHeader( table );

Allan

allan · May 2015

On the link and get a few authentication warnings, then a table with no data and no Javascript errors in the console. Do I need to log in?

new $.fn.dataTable.fixedHeader( table );

Should be:

new $.fn.dataTable.FixedHeader( table );

new $.fn.dataTable.FixedColumns

FixedColumns isn't being loaded onto the page. Do you want FixedColumns or FixedHeader?

Allan

ilatine · May 2015

I made the changes and no error appeared but, as I scroll I get a weird functionality of the fixedheader. I get two headers.

Can I send you a direct message through this site with the credentials?

allan · May 2015

Sure, click on my name above and then "Send message".

Allan

ilatine · May 2015

Hi Allan,

Is there a colReorder event? As the columns are being reordered, I want to be able to listen for it and make changes to the DOM elsewhere on the page.

I found this, columns().order(), but I don't think it's what I'm looking for after reading it.

Thanks for your help.

allan · May 2015

Yes, it is called column-reorder.dt. The source for it is here. I'm working on improved documentation at the moment...

Allan

ilatine · May 2015

Thanks Allan!

ColReorder dragging

ColReorder dragging

Replies

Howdy, Stranger!

Categories

DataTables

ColReorder dragging

ColReorder dragging

Replies

Howdy, Stranger!

Quick Links

Categories

DataTables