DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

ColReorder dragging

ColReorder dragging

ilatineilatine Posts: 20Questions: 2Answers: 0
in ColReorder

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!

Replies

  • allanallan Posts: 63,489Questions: 1Answers: 10,470 Site admin

    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

  • ilatineilatine Posts: 20Questions: 2Answers: 0

    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?

  • allanallan Posts: 63,489Questions: 1Answers: 10,470 Site admin

    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

  • ilatineilatine Posts: 20Questions: 2Answers: 0

    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.

  • ilatineilatine Posts: 20Questions: 2Answers: 0

    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.

  • allanallan Posts: 63,489Questions: 1Answers: 10,470 Site admin

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

    Allan

  • ilatineilatine Posts: 20Questions: 2Answers: 0

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

  • allanallan Posts: 63,489Questions: 1Answers: 10,470 Site admin

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

    Allan

  • ilatineilatine Posts: 20Questions: 2Answers: 0
    edited 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?

  • ilatineilatine Posts: 20Questions: 2Answers: 0

    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 );
    });
  • allanallan Posts: 63,489Questions: 1Answers: 10,470 Site admin

    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

  • allanallan Posts: 63,489Questions: 1Answers: 10,470 Site admin

    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

  • ilatineilatine Posts: 20Questions: 2Answers: 0

    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?

  • allanallan Posts: 63,489Questions: 1Answers: 10,470 Site admin

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

    Allan

  • ilatineilatine Posts: 20Questions: 2Answers: 0
    edited 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.

  • allanallan Posts: 63,489Questions: 1Answers: 10,470 Site admin

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

    Allan

  • ilatineilatine Posts: 20Questions: 2Answers: 0

    Thanks Allan!

This discussion has been closed.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.