Creating a wrapper for DataTables

Jaquio

I'd like to create something like this but I'm not sure how:

[code]$('#userGrid').wrapperCall([properties specific to my wrapper], [properties used by DataTables]);[/code]

My project is based on DataTables but I'm adding to it things like in-row updates (using jEditable) and out-of-row updates (using the jQuery UI Dialog). The wrapper will initialize and load DataTables and then bind some events using the wrapper specific properties. I think it'd look cleaner this way.

Jaquio

So I have sort of been able to create the wrapper for DataTables but I'm unable to call the DataTables methods properly, can somebody help me?

My problem starts when my code calls [code]$('#results').myGrid('fnPopulate', data)[/code]. This in turn calls [code]$(this).dataTable().fnClearTable();[/code] to clear up the table prior to adding records (full code below). I get this error:

From jquery.dataTables.js: "Microsoft JScript runtime error: Object doesn't support property or method 'getAttribute'". The error happens when trying to run [code]var sId = this.getAttribute( 'id' );[/code] in [code]this.oApi = {[/code]

The code works properly when I don't use the wrapper myGrid.

[code]
/*
Dependant of:
jquery.js,
jquery.dataTables.js,
jquery.jeditable.js

Goal: To be a wrapper for DataTables. This will implement edition and stuff like that

Requires:
+ A defined editor on the structure and script (see defaults)
*/
(function ($) {
var _settings = {};

var methods = {
init: function (options) {
var defaults = {
'editable': true,
'inRowEdit': false,
'editorName': 'editor',
'editUrl': '#',
'addBlankRow': false
};

// Merges the settings coming from the user
// and the defaults together
_settings = $.extend(defaults, options);

// Start the datatable
$(this).dataTable(_settings);

if (_settings.addBlankRow) {
// Call fnPopulate function with null data
$(this).myGrid('fnPopulate', null);
}
},
fnPopulate: function (data) {
// Clears the table before writing to it
$(this).dataTable().fnClearTable();
// Populates the table
$.each(data, function (index, val) {
$(this).dataTable().fnAddData(val);
});

if (_settings.addBlankRow) {
// Add blank row
var oBlankRow = createBlankRow();

$(this).dataTable().fnAddData(oBlankRow);
}

if (_settings.editable) {
if (!_settings.inRowEdit) {
// Allow for dialog edit
doubleClickRow($(this).attr('id'));
}
else {
// Make cells editable
makeRowEditable($(this).attr('id'));
// Add tab, row up and down functionality

}
}
}
};

function createBlankRow() {
var oColumns = _settings.aoColumns;
var oBlankRow = {};

$.each(oColumns, function (index) {
if (oBlankRow[oColumns[index].mData] != undefined) {
if (!oBlankRow[oColumns[index].mData].push) {
oBlankRow[oColumns[index].mData] = [oBlankRow[oColumns[index].mData]];
}
oBlankRow[oColumns[index].mData].push(oColumns[index].value || '');
} else {
oBlankRow[oColumns[index].mData] = oColumns[index].value || '';
}
});

return oBlankRow;
}

function makeRowEditable(id) {
$('#' + id + ' tbody tr td').editable(function (value, settings) {
var aPos = $('#' + id).dataTable().fnGetPosition(this);

// Get the data array for this row
var aData = $('#' + id).dataTable().fnGetData(aPos[0]);

// Update or create?
if ($(aData).attr("$id")) {
alert(JSON.stringify(aData));
}
});
}

function doubleClickRow(id) {
$('#' + id + ' tbody tr').dblclick(function () {
$('#' + _settings.editorName).dialog("open");
// Pass data to dialog
setObjectOnEditor($('#' + id).dataTable().fnGetData(this));
});
}

function setObjectOnEditor(obj) {
// Get all the inputs within the form
var formInputs = $('#' + _settings.editorName + ' :input');

// Loop through all the inputs
$.each(formInputs, function (index) {
var $field = $(formInputs[index]);
// Does it have a way to bind the object property with itselft?
if ($field.attr('name').length) {
// What type of input is it?
if ($field.attr('type') == "text" || $field.is("textarea")) {
$field.attr('value', obj[$field.attr('name')]);
}
else {
if ($field.attr('type') == "checkbox") {
if (obj[$field.attr('name')] == 1 || obj[$field.attr('name')].toString().toUpperCase() == "TRUE") {
$field.attr("checked", "checked");
}
}
else {
if ($field.attr('type') == "select") {
$field.val(obj[$field.attr('name')]);
}
}
}
}
});
}

$.fn.myGrid = function (method) {
// Method calling logic
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method ' + method + ' does not exist on jQuery.dataTables.myGrid');
}
}
})(jQuery);
[/code]

Jaquio

The "this" in [code]var sId = this.getAttribute( 'id' );[/code] is one record of my data... Not sure why...

Jaquio

Fixed it. I created a global variable that traps the generation of the DataTable and then replaced it all over the code.