Using live.datatables.net

kenrights

Hi Guys,

The forum has been great to me so far. My more difficult questions I can tell from searching the web site require that I explain myself clearly. In reading the Asking for help page, I decided to familiarize myself with live.datatables.net.

Is there a youtube or other tutorial I can review to understand how this page should be utilized? Right off the bat, I got confused.

The installation page says that I should initialize the tables with this in my .js file:

$(document).ready( function () {
    $('#table_id').DataTable();
} );

I followed the above when I got it working on my local machine. No issues.

The live.datatables.net default example gives me this:

$(document).ready( function () {
  var table = $('#example').DataTable();
} );

I'm new to java script but, know what var table = is putting what follows into the variable. Because I'm a novice I'm confused as why it is needed but, regardless, I started pasting in my code from my local install and right away i'm stumped. Any help would be great. Here's what I tried and it doesn't appear to work:

$(document).ready( function () {
  var table = $('#example').DataTable({
    stateSave: true, // remember how the user left the table last
    colReorder: true
  });
} );

The console doesn't bark and me and yet I can't move the columns in the table. What have I done wrong?

Thank You for any insight.

kthorngren

Thanks for trying to learn how to provide examples for help. This typically the best way to get help since each person has a different configuration. Having a running test case replicating the issue is a great start in getting help. And sometimes you will find on your own what the problem is when you are building the test case. There aren't any youtube videos. The only docs I know of is this tech note which gives you links to templates for ajax and server side loaded data:
https://datatables.net/manual/tech-notes/9

I'm new to java script but, know what var table = is putting what follows into the variable. Because I'm a novice I'm confused as why it is needed

When doing this the table variable (can be any variable name you like) stores a reference to the Datatables API for that particular table. So you can do something like table.rows().data() instead of $('#example).DataTable().rows().data()`. Its simpler and more efficient using the variable. More info can be found in the API doc:
https://datatables.net/manual/api

The console doesn't bark and me and yet I can't move the columns in the table.

Likely you haven't included the ColReorder JS and CSS files in the live.datatables.net system. You can add the include files by clicking on "Add Library". The lines are added at the top of the HTML tab and need to be moved down so they are loaded in the proper order. You can choose the Nightly version (I normally do this) or the version listed in the drop down. This version is not necessarily the latest version. When you move the lines you can edit them for the desired version.

I have found the easiest way is to use the Download Builder to generate the desired options and copy the CDN links into live.datatables.net replacing the defaults. You want to make sure to not load duplicate JS and CSS files. This will cause problems.

in the output tab there is an upward/right facing arrow that will open the page into a new tab. This can be useful for certain tests.

Hope this gets you started. Please post any questions. We are happy to help you learn.

Kevin

kenrights

Thank you kthorngren for the comment. I followed those links and read the content. I then went back to trying to get live datatables to work with a very basic change.

I tried removing var table = to make the .js look like it does on my local computer which works. On live data tables it doesn't work for me.
Perhaps someone could just help me with a starter example which will allow me to at least make a change that works on the default table? For example, I just want to reorder the columns and I can't make it work.

$(document).ready( function () {
  $('#example').DataTable({
    colReorder: true
  });
} );

Something as simple as the above doesn't work for me. I apologize for coming off as such a dolt. I'm thinking a simple working example with a tweak will allow me to understand how to test my changes. Ultimately, I'll be able to ask my questions.

tangerine

As Kevin said, "Likely you haven't included the ColReorder JS and CSS files in the live.datatables.net system."

With regard to "a simple working example", I don't really understand what you need. There are many examples on the "Examples" page, and http://live.datatables.net/ itself provides a rudimentary example to build on.

kenrights

I have no doubt that you are correct. Here's the code I pasted into http://live.datatables.net/:

$(document).ready( function () {
  $('#example').DataTable({
    colReorder: true
  });
} );
// the above does not work for me.  I cannot reorder the columns of the table.

As you can see above, I did include colReorder in the JS. I don't know that it needs to be included in CSS as well. BTW: I have colReorder working on my local machine. I'm simply trying to figure out http://live.datatables.net/ so that I can ask questions. I'm trying to start simple. Can someone please simply paste in a working example with colReorder code that works so that I can copy and paste it into http://live.datatables.net/ and verify that something other than the default works.

I know I'm frustrating you guys and I'm sorry. If you'd like, I'll pay for technical support and have someone walk me through it over skype.

kthorngren

ColReorder is an extension to Datatables, its not included in the base Datatables. You need to include the ColReorder JS and CSS extension files. These are in addition to the configuration option of colReorder: true. As I described above use either "Add Library" or the Download Builder. Here is an example using the "Add Library" option. Look in the HTML tab.
http://live.datatables.net/ravawexi/1/edit

Kevin

kenrights

kthorngren I got it! Just as you said, I pasted this into the HTML section and it worked.

    <!-- ColReorder JS and CSS -->
    <link href="https://nightly.datatables.net/colreorder/css/colReorder.dataTables.css?_=992ea0fd10547815c400fe57c1bb45e7.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/colreorder/js/dataTables.colReorder.js?_=992ea0fd10547815c400fe57c1bb45e7"></script>

I made the incorrect assumption that live.datatables.net loaded all of the same extension files that my local installation had. I'll try to dig up some more information about ColReorder JS and CSS extension files and see what I can learn.

THANK YOU SO MUCH GUYS for your patience. Anything you think I should read, please send it my way.