New user - help with initialization

LStephens314

jQuery 3.3.1 / FireFox 59.0.2 / Windows 7 / loading DataTables from the CDN (jquery.dataTables.min.js)

$('#extTable').DataTable(
{ "columns" : [
{ "orderable": false }, // 0
{ "orderable": false }, //1
//(multiple entries)
{ "orderable": false }, //20
{ "orderable": false } //21
]}
).order( [7, 'asc'], [9, 'asc'], [16, 'asc']).draw();

works.

As soon as I add any any additional parameter (showing all I want to add so far), it doesn't work. (Adding them with the global method didn't work either): e.g.,
{ "orderable": false } //21
]},
{"paging" : false},
{"processing" : true},
{"scrollX" : true},
{"scrollY": "1000px"},
{"scrollCollapse": true},
{"stateSave" : true}
).order( [7, 'asc'], [9, 'asc'], [16, 'asc']).draw();

Looking in the debugger, none of the additional commands appear in the code - they are being ignored.

What am I doing wrong?

colin

Hi @LStephens314 ,

Two things,

1. For brevity, you can define the columns.orderable in the columnDefs object, and just set them all to false with

columnDefs: [{ targets: '_all', orderable: false}]

1. the reason why you're getting errors, is that the majority of those you listed aren't part of an object, they're just standalone options. So, for example, paging, you would define just as paging: false, it doesn't need the curlies. The same for processing, see the usage in the example here.

Cheers,

Colin

LStephens314

I just took out some of the code in columnDefs for brevity. I have some that are set to true.

So now it reads:
$('#extTable').DataTable(
{ "columns" : [
{ "orderable": false }, // 0
{ "orderable": false }, //1
{ "orderable": false }, //2
{ "orderable": false }, //3
{ "orderable": false }, //4
{ "orderable": false }, //5
{ "orderable": false }, //6
{ "orderable": false }, //7
{ "orderable": true }, //8
{ "orderable": true }, //9
{ "orderable": false }, //10
{ "orderable": false }, //11
{ "orderable": false }, //12
{ "orderable": true }, //13
{ "orderable": true }, //14
{ "orderable": false }, //15
{ "orderable": false }, //16
{ "orderable": false }, //17
{ "orderable": false }, //18
{ "orderable": false }, //19
{ "orderable": false }, //20
{ "orderable": false } //21
]},
"paging" : false,
"processing" : true,
"scrollX" : true,
"scrollY": "1000px",
"scrollCollapse": true,
"stateSave" : true
).order( [7, 'asc'], [9, 'asc'], [16, 'asc']).draw();

(I don't think I had to specify those that are true but I did it to make debugging - recognizing the true ones - easier.)

Doesn't work. I get an error that there should be a ) on 109 which is
"paging" : false BUT I think (from earlier errors) it wants a ) at the end of the columns command, i.e., ]})

Can you only put one directive in here and have to apply the others somewhere else? (But I tried the global command and that didn't work either.)

LStephens314

FWIW, I moved the last 6 from the bottom to the top. Now it wants a ) after the paging directive. It's as if you're limited to one directive.

colin

There's still some wonky syntax, the curly before columns and missing an array around the ordering. Try this:

$('#extTable').DataTable({
  "columns": [
    { "orderable": false }, // 0
    { "orderable": false }, //1
    { "orderable": false }, //2
    { "orderable": false }, //3
    { "orderable": false }, //4
    { "orderable": false }, //5
    { "orderable": false }, //6
    { "orderable": false }, //7
    { "orderable": true }, //8
    { "orderable": true }, //9
    { "orderable": false }, //10
    { "orderable": false }, //11
    { "orderable": false }, //12
    { "orderable": true }, //13
    { "orderable": true }, //14
    { "orderable": false }, //15
    { "orderable": false }, //16
    { "orderable": false }, //17
    { "orderable": false }, //18
    { "orderable": false }, //19
    { "orderable": false }, //20
    { "orderable": false } //21
  ],
  "paging": false,
  "processing": true,
  "scrollX": true,
  "scrollY": "1000px",
  "scrollCollapse": true,
  "stateSave": true
}).order([
  [7, 'asc'],
  [9, 'asc'],
  [16, 'asc']
]).draw();

Cheers,

Colin

LStephens314

Thanks! It was a syntax issue. It's a change from the program I've been using and I thought each element needed its own { } instead of just one set around the entire thing.

Working now.