Site update

allan

Hello all,

As you will have noticed (at least, those who have been here before!) the DataTables and Editor site's have undergone a huge change today, with a new more modern design along with the releases of DataTables 1.10 and Editor 1.3.

There are a lot of changes, and I don't doubt there will be some errors along the way. I wonder if you do spot any errors, post them in this thread and I'll collate them into a list and fix them when possible.

Know issues:

• Bootstrap and jQuery UI examples for DataTables and Editor, when embedded into this site, don't style correctly
• <s>Extension examples which use server-side processing do not work</s>
• <s>"Accept answer" causes an error in the forums</s>
• <s>Generator isn't including all required files</s>

Thanks!
Allan

austinlyon

Allan, way to go! The site looks great, and I love the layout of the Manual and Reference sections! I'm excited to check out some of the Editor features when I find the time, in particular inline editing.

A few notes on the Editor site:

• The top google hit for "datatables editor options" leads to <editor.datatables.net/options/>, which seems to still link to the old version of the site, and is missing its CSS styling, so you may need some SEO-friendly redirect to the new <editor.datatables.net/reference/option/>
• In the Manual > Options page (editor.datatables.net/manual/options), the fields property links are broken (field.name, field.data, etc), I believe because they're missing the 's' (fields.name, fields.data). The fields.property links within the Reference > Options page work fine.
• When we "preview" a forum post, and realize we've made an error, how do we go back and edit the post? I only see "Save Draft" and "Post Comment," though refreshing the page did bring me back to an editable form with all my text intact.

A quick question concerning the new Editor, though possibly out of place in this thread:

I see that "events" are no longer listed as editor options in the manual / reference. Can events still be added in some way as editor options, or is the standard and sole method to deal with events going to be the API using on()?

kombat

New site looks great. However, where are the old docs for 1.9? Me, and others I'm sure, will still need them until our organizations allow us to upgrade to 1.10.

allan

@kombat - http://legacy.datatables.net. There is a link at the top of the new manual page pointing to them.

@austinlyon - Nice one - Thanks for this! I've put in the redirects and fixed the links. The forum preview however... Good point! Its a bug in the forum software that I'll put a work around in for tomorrow morning. The only way to access the edit button at the moment is to use the DOM inspector in your browser...

I see that "events" are no longer listed as editor options in the manual / reference. Can events still be added in some way as editor options

Yes, absolutely they can still be used as they were in 1.2. However, I wanted to standardise on the on() etc functions, so passing them in as initialisation options is no longer directly documented. But it is fully backwards compatible, they will still work as before.

Regards,
Allan

kombat

Alan,

I already tried that. It looks exactly the same. I browsed through it a bit hoping it was just the old stuff but in a different format, but it's still all referencing the new version unless I'm missing something. Thanks.

allan

No you are absolutely right - I've duffed up my server configuration for the sub-domain. Working on it just now...

allan

The legacy site is back up and running now. I haven't checked everything (its been a long day!), but the main documentation is at least present:

• Full reference list http://legacy.datatables.net/ref
• Usage: http://legacy.datatables.net/usage/
• API: http://legacy.datatables.net/api

While the site was erring, it was doing a 301 redirect, so you may have to clear your browser cache if you were trying to view those pages below.

Allan

austinlyon

This one's pretty minor, all things considered, but the notifications from the forum's user widget - located at the top of the right sidebar - run off the right boundary of the site. Or at least this is true for most window sizes; if you expand the width of the browser window, you can see more of the notifications, but I think it'd make more sense if the notifications "bubbled out" to the left, so they aren't running off the boundaries of the site's content.

To be super clear, this is the class='MeBox' div with the gravatar image, notifications globe image, inbox mail image, etc. Tested on a mac in Safari, Chrome, Firefox.

allan

Thanks for flagging that up. I'll take a look into it when I get back to the office next week.

Allan

indymx

I tried the Generator last night. Seems that it doesn't provide all of the files that it used to provide.

Plus, having to scroll left and right is a real pain in the butt.

allan

@indymx - thanks for pointing that out. Some of the files required for Generator aren't being included. I'll look into that as soon as possible. Added to the list up top.

I'm not a fan of the scroll either, but have yet to think of a better layout within the size restriction. I will do, but I'll fix stuff first!

Allan

indymx

Can you use a modal for the Generator data entry?

FuzzyBunnyFeet

I already posted this as comments on the relevant pages, before I saw this thread.

There is a circular reference between the columnDefs page and the columns page where each refers to the other for a list of options. I was looking for a list of options for columnDefs because this configuration does not work for turning off sorting on selected columns when the "ordering" parameter is true (trying to turn off sorting on selected columns when "ordering" is false is just plain silly):

function myDataTable(id, sortable) {
   var table = $(id).DataTable({
      "info"         : false,    // Remove pagination and row count information
      "lengthChange" : false,    // Remove #of rows to display drop-down
      "paging"       : false,    // Remove pagination
      "searching"    : false,    // Remove Search box and listeners
      "ordering"     : sortable, // Set up row sorting
      // Turn off sorting for columns with "nosort" class
      "columnDefs": [{"sortable": false, "targets": [".nosort"]}] 
    });
    return table;
}

I've tried specifying the "targets" with and without the leading period for the class selector.

Sorry about the above code, but no matter what I've tried I can't seem to get Markdown code-block to work correctly.

FuzzyBunnyFeet

OK, the preview and first view after posting don't show the code-block; however, after posing and a refresh, voila! There it is in all it's syntax highlighting glory.

Sorry for my previous apology ;-)

FuzzyBunnyFeet

The "Javascript Sourced data" example (http://datatables.net/examples/data_sources/js_array.html) does not have the usual Javascript, HTML, CSS, etc. tabs.

camainc

Not sure if this is a browser specific problem, but no matter what I search on the results come up blank.

silence150

Is it possible to put links to the 1.9 documentation so they are easier to find? Perhaps in an alert box at the top of every index page? Considering the drastic changes I'm surprised that the major version number hasn't been changed. We are a team of ~15 people that depend on this documentation and I'm probably the only one who is somewhat experienced with DataTables, and even I find it difficult to find the right documentation now.

That said I love the direction DataTables is going in. Great work!

mrmarkward

Absolutely LOVE the new site. Great job! I'm having trouble purchasing EDITOR.

louking

I'm at legacy.datatables.net because I'm on 1.9.4 because I haven't had a chance to upgrade, but site looks suspiciously like the 1.10 site, and links like Examples and Manual give 404 error.

Should this be working now? Comments from May 1 have specific links, but the main legacy link (http://legacy.datatables.net) still seems bad, and this is what is referenced from 1.10 manual page https://datatables.net/manual/index

allan

Hi all - thanks for the feedback! I'm not ignoring this thread (far from it!), I'm just a little rushed off my feet keeping up! Its been a whirlwind since the release last week. I'll be pushing out an update to the site tomorrow with updates based on your feedback here. I'll address each point individually then.

@louking - The legacy site should be working and appears to be so for me. Can anyone else confirm either way?

@mrmarkward - Sorry you hear you are having problems! Could you drop me an e-mail - allan @ this domain.name and I'll try to help resolve the issues!

@silence150 - Yes, I think this is a good idea. An upgrade notice with FAQs on the upgrade and link to the legacy site is probably a good move here...!

Thanks,
Allan

louking

Interesting. When I click from here or open a new tab and go there directly, it looks fine (mostly like the old site).

But when I click from https://datatables.net/manual/index it looks mostly like the new site, missing the old site navigation.

allan

@louking - Ah! The problem is that the legacy site is not ssl enabled, so it is falling back to the new site. I'll correct the link so it points at http:// for the moment and get ssl running on it later.

@FuzzyBunnyFeet:

• JS array example - thanks, now fixed and will deployed soon
• Syntax highlighting - I noticed that as well. I need to dig into the forum code a bit...
• Sorting issue - disabling the sort with a class appears to work okay for me: http://live.datatables.net/rezesiz/1/edit . Can you open a new thread with a test case showing the problem if it doesn't work for you?
• The circular reference was due to missing options. I had meant to list all of the options which it now does (again, when deployed). I've also add a doc page specifically for columnDefs.target.

Thanks all!

Regards,
Allan

kqueekquee

Thanks Merci

ask

The example for the scroller extension on http://datatables.net/extensions/scroller/ doesn't work.

FuzzyBunnyFeet

Unless I'm missing something, all the Styling examples linked to at http://datatables.net/examples/index show the same Javascript, HTML and CSS. The explanatory text and the demo pages indicate that there should be differences in the Javascript at a minimum, and perhaps in the CSS.

allan

Its not a Javascript different in those examples, it the class name that is used. The manual page describes this more thoroughly: http://datatables.net/manual/styling/classes . In the case of the CSS framework integration it is the include files that are important.

Allan

FuzzyBunnyFeet

Alan, I'm still not seeing the differences. Here is what I copied from the Javascript and CSS tabs for the first 4 links:

Base Style

Javascript Tab

The Javascript shown below is used to initialise the table shown in this example:
$(document).ready(function() {
$('#example').dataTable();
} );
In addition to the above code, the following Javascript library files are loaded for use in this example:
//code.jquery.com/jquery-1.10.2.min.js
//cdn.datatables.net/1.10.0/js/jquery.dataTables.js

CSS Tab

The following CSS library files are loaded for use in this example to provide the styling of the table:
//cdn.datatables.net/1.10.0/css/jquery.dataTables.css

Base Style - No Styling Classes

Javascript Tab

The Javascript shown below is used to initialise the table shown in this example:
$(document).ready(function() {
$('#example').dataTable();
} );
In addition to the above code, the following Javascript library files are loaded for use in this example:
//code.jquery.com/jquery-1.10.2.min.js
//cdn.datatables.net/1.10.0/js/jquery.dataTables.js

CSS Tab

The following CSS library files are loaded for use in this example to provide the styling of the table:
//cdn.datatables.net/1.10.0/css/jquery.dataTables.css

Base Style - Row Borders

Javascript Tab

The Javascript shown below is used to initialise the table shown in this example:
$(document).ready(function() {
$('#example').dataTable();
} );
In addition to the above code, the following Javascript library files are loaded for use in this example:
//code.jquery.com/jquery-1.10.2.min.js
//cdn.datatables.net/1.10.0/js/jquery.dataTables.js

CSS Tab

The following CSS library files are loaded for use in this example to provide the styling of the table:
//cdn.datatables.net/1.10.0/css/jquery.dataTables.css

Base Style - cell borders

Javascript Tab

The Javascript shown below is used to initialise the table shown in this example:
$(document).ready(function() {
$('#example').dataTable();
} );
In addition to the above code, the following Javascript library files are loaded for use in this example:
//code.jquery.com/jquery-1.10.2.min.js
//cdn.datatables.net/1.10.0/js/jquery.dataTables.js

CSS Tab

The following CSS library files are loaded for use in this example to provide the styling of the table:
//cdn.datatables.net/1.10.0/css/jquery.dataTables.css

FuzzyBunnyFeet

Doh! Sorry, I hit post comment when I was going for the Markdown link.

And then the edit icon appeared. But delete is not an option so this apology remains.

Too bad Markdown does not put each quoted line on a separate line. I have "> " in front of each line in the quote blocks above.

FuzzyBunnyFeet

In http://datatables.net/reference/api/column(), the DT parameter type link for column-selector points to the cell-selector page.

harishrao

in datatable column width is not working properly bec if i typed eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee lengthy word it is not resizing the column i tried many ways "fnAdjustColumnSize" and column.adjust() and so many................. but i
m not yet and solution greatly appreciated ....................Thank U...

allan

@harishrao - Can you please open a new thread with a link to a test page showing your issue. This thread is specifically for the recent updates to the web-site.

@FuzzyBunnyFeet - column() - thanks, will be fixed in the next push to the site.

Regarding the styling - its not the Javascript or CSS include that changes. As I say, its the table class. From the documentation:

The DataTables stylesheet provides a base set of styles to position elements such as the search input box, pagination control etc, but it also has a number of features which can be optionally enabled by adding class names to your table tag.

For example:

<table id="example" class="row-border" cellspacing="0" width="100%">

or

<table id="example" class="hover" cellspacing="0" width="100%">

The difference is under the HTML tab in the examples.

To see how the class name can effect the table style more visually, have a look at the theme creator which allows the classes to be toggled dynamically.

Allan