Inline editing using a select type is giving an empty select
Inline editing using a select type is giving an empty select
So here is my initialization code:
var editor = new $.fn.dataTable.Editor( {
ajax: function ( method, url, data, successCallback, errorCallback ) {
successCallback( {"id": 4} );
},
table: "#grid-basic",
fields: [ {
label: "Request URL:",
name: "request-url"
}, {
label: "Target URL:",
name: "target-url"
}, {
type: "select",
label: "Redirect Type:",
name: "category",
options: ["Edinburgh","London"]
}
]
});
// Allow for tabbing between fields
editor
.on('open', function (e, type) {
if (type === 'inline') {
// Listen for a tab key event when inline editing
$(document).on('keydown.editor', function (e) {
if (e.keyCode === 9) {
e.preventDefault();
// Find the cell that is currently being edited
var cell = $('div.DTE').parent();
if (e.shiftKey && cell.prev().length && cell.prev().index() !== 0) {
// One cell to the left (skipping the first column)
cell.prev().click();
}
else if (e.shiftKey) {
// Up to the previous row
cell.parent().prev().children().last(0).click();
}
else if (cell.next().length) {
// One cell to the right
cell.next().click();
}
else {
// Down to the next row
cell.parent().next().children().eq(1).click();
}
}
});
}
})
.on('close', function () {
$(document).off('keydown.editor');
});
// DataTable Initialization
var dataTable = $('#grid-basic').DataTable({
responsive: true,
columns: [
{ data: "request-url" },
{ data: "target-url" },
{ data: "category" },
{ data: null, defaultContent: '<button type="button" class="btn btn-xs btn-danger icon-delete"><span class="glyphicon glyphicon-remove"></span></button>', orderable: false }
]
});
// TableTools DataTable plugin initialization
var tableTools = new $.fn.dataTable.TableTools(dataTable, {
"sSwfPath": swfPath,
"aButtons": [
{
"sExtends": "collection",
"sButtonText": "Export",
"aButtons": ["csv", "xls", "pdf"]
},
{
"sExtends": "copy",
"sButtonText": "Copy all Rows"
}
]
});
$( tableTools.fnContainer() ).addClass('pull-right').insertBefore('div.dataTables_wrapper');
// Set up editing of fields
$('#grid-basic').on( 'click', 'tbody td:not(:last-child)', function () {
editor.inline( this, {
submitOnBlur: true
});
} );
// Set up Removal functionality
$('#grid-basic').on('click', 'button.icon-delete', function() {
dataTable.row($(this).parents('tr')).remove().draw(false);
});
I am having a couple of issues. First and foremost the Category select box that shows up when clicking on the "Redirect Type" field is empty. Just an empty select box. I can't seem to get any options to show.
Also I am getting some really weird issue with the TableTools buttons. The export buttons all work, however, the copy button doesn't work. Funny thing is, if you click on the export (dont even need to select an option) the copy button works from there on in.
Answers
Seems that the "options" option is only >= 1.4 which is still in development. If your on 1.3.3 (most people) its called ipOpts. There is a small mention of this in the documentation but I assumed that the new stuff wouldn't be in the docs unless it was actually released. Maybe have a selector at the top to choose documentation for a specific version? Or refrain from changing the docs until the code is released?
1.4 was released on the 10th and is fully ready to go! It can be downloaded from https://editor.datatables.net/download .
As you say, the documentation reflects the most recent version with a note for the older version.
Allan