Further explanation of result from another posting

BPAT

This posting: https://datatables.net/forums/discussion/48744/cascade-method-not-taking-place-among-filter-drop-downs-for-all-the-columns

How would one implement the JS Bin solution this when the datatables table creation is within a function?

When I table on draw outside and the function buildSelect outside, I get response that says table isn't defined.

Sorry, I am not particularly bright on these matters.

BPAT

If it helps, this is what I currently have to create the selects:

var i;
for (i = 0; i < formStuff.length; i++) {
var column = this.api().column(i);
var select = $('<select class="form-control" data-column="'+i+'" id="Sel'+i+'"><option value=""></option></select>')
.appendTo( $('#'+formStuff[i].ID).empty().html('<strong>'+formStuff[i].ID+'</strong>:<br/>') )
.on( 'change', function () {
table.column($(this).attr('data-column')).search(
$(this).val()
).draw();
});

column.data().unique().sort().each( function ( d, j ) {
select.append( '<option value="'+d+'">'+d+'</option>' );
});

}

And I have this in my initComplete section.

kthorngren

See the answer in this thread asking the same question.

Kevin

BPAT

Kevin, I guess I am just not smart enough to understand the links you posted.

I have a function that gets the data and then calls a function that creates the datatable. When I try as suggested in those posts I get a table is undefined or a can't intialize multiple tables thing. I noticed that all of these have the table created outside of a function. Maybe that's my issue, but I don't know how else to do it. Any further thoughts? I appreciate the help you provide.

tangerine

Show us how you are initialising your DataTable.
Better still would be a link to your page, or to a test case showing the issue.
https://datatables.net/forums/discussion/12899/post-test-cases-when-asking-for-help-please-read#latest

kthorngren

You have table.column($(this).attr('data-column')).search( inside initComplete. It sounds like this is the statement causing the error. The variable table is undefined insdie initComplete. The recommended option is to use get the API instance using this.api() inside initComplete. Do something like this:

var table = this.api();  // Get API instance.

var i;
for (i = 0; i < formStuff.length; i++) {
var column = this.api().column(i);
var select = $('<select class="form-control" data-column="'+i+'" id="Sel'+i+'"><option value=""></option></select>')
.appendTo( $('#'+formStuff[i].ID).empty().html('<strong>'+formStuff[i].ID+'</strong>:<br/>') )
.on( 'change', function () {
table.column($(this).attr('data-column')).search(
$(this).val()
).draw();
});

column.data().unique().sort().each( function ( d, j ) {
select.append( '<option value="'+d+'">'+d+'</option>' );
});

}

See this example. For more information see this thread.

Kevin

BPAT

This should give you an idea. The ajax call is to a SharePoint list that I can't link to.

http://live.datatables.net/pilojeya/1/edit

BPAT

I just wanted to say thank you to you all. I believe I have it working now. Happy New Year!