Plug-in to fill out form

gutzofter

@allan - I needed to select a row and have the row data populate a form. This is very rough edged. I have unit tests in place, but not for your sample and using your framework (I'm using QUnit). Also someone needed to convert their selected row data to a query string.

After working this for a bit it looks to me that I might be better off coming up with a mapping function for aoData. What do you think?

Unit tests:
[code]
should('validate param works on array', function() {
var myArray = { data1: 'data1', data2: ['data2', 'data23'] };
var serialized = $.param(myArray);
same(serialized, 'data1=data1&data2%5B%5D=data2&data2%5B%5D=data23');
});

should('validate fnGetParameterData works on data tables', function() {
var table = kits.getKitTable();
table.fnSetColumnNames(['kit_number', 'kit_description']);

var parameterData = table.fnGetParameterData();
var expected = {
aoData: [
{
kit_number: 'THX-1138'
,kit_description: 'A Doohickey used on Jaberwockies'
}
]
};
same(parameterData, expected);
var serialized = $.param(parameterData);
same(serialized, 'aoData%5B0%5D%5Bkit_number%5D=THX-1138&aoData%5B0%5D%5Bkit_description%5D=A+Doohickey+used+on+Jaberwockies');
});

should('validate fnGetSelectedParameterData works on data tables', function() {
var table = kits.getKitTable();
table.fnSetColumnNames(['kit_number', 'kit_description']);

table.fnSetSelectedRow(0);
var parameterData = table.fnGetSelectedParameterData();
var expected = {
aoDataSelected: {
kit_number: 'THX-1138'
,kit_description: 'A Doohickey used on Jaberwockies'
}
};
same(parameterData, expected);
var serialized = $.param(parameterData);
same(serialized, 'aoDataSelected%5Bkit_number%5D=THX-1138&aoDataSelected%5Bkit_description%5D=A+Doohickey+used+on+Jaberwockies');
});

should('validate fnGetSelectedSerialize works on data tables', function() {
var table = kits.getKitTable();
table.fnSetColumnNames(['kit_number', 'kit_description']);

table.fnSetSelectedRow(0);
var serialized = table.fnGetSelectedSerialize();
same(serialized, 'aoDataSelected%5Bkit_number%5D=THX-1138&aoDataSelected%5Bkit_description%5D=A+Doohickey+used+on+Jaberwockies');
});
[/code]

gutzofter

parameter.plug.in.js
[code]
/**
* Created by IntelliJ IDEA.
* User: jgutierrez
* Date: Jul 22, 2010
* Time: 2:58:19 PM
* To change this template use File | Settings | File Templates.
*/

$.fn.dataTableExt.oApi.fnGetFilteredData = function (oSettings) {
var a = [];
for (var i = 0, iLen = oSettings.aiDisplay.length; i < iLen; i++) {
a.push(oSettings.aoData[ oSettings.aiDisplay[i] ]._aData);
}
return a;
};

$.fn.dataTableExt.oApi.fnGetDisplayedData = $.fn.dataTableExt.oApi.fnGetFilteredData;

$.fn.dataTableExt.oApi.fnSetColumnNames = function (oSettings, colNames) {
if (!oSettings._pluginData !== undefined) {
oSettings._pluginData = {};
}
oSettings._pluginData.colNames = colNames;
};

function addColsToRows(colNames, rows) {
var parameterArray = [];
for (var rowsIndex in rows) {
var row = rows[rowsIndex];
var dataItem = addColsToRow(colNames, row);
parameterArray.push(dataItem);
}
return parameterArray;
}

function addColsToRow(colNames, row) {
var dataItem = {};
for (var colIndex in colNames) {
var propertyName = colNames[colIndex];
dataItem[propertyName] = row[colIndex];
}
return dataItem;
}

$.fn.dataTableExt.oApi.fnGetParameterData = function (oSettings) {
var parameterArrays = [];
var rows = this.fnGetDisplayedData();

if (oSettings._pluginData !== undefined) {
if (oSettings._pluginData.colNames !== undefined) {
var colNames = oSettings._pluginData.colNames;
parameterArrays = addColsToRows(colNames, rows);
return { aoData: parameterArrays };
}
}
else {
return { aoData: rows };
}
};

$.fn.dataTableExt.oApi.fnSetSelectedRow = function (oSettings, selectedRowIndex) {
if (oSettings._pluginData === undefined) {
oSettings._pluginData = {};
}
oSettings._pluginData.selectedRowIndex = selectedRowIndex;
};

$.fn.dataTableExt.oApi.fnGetSelectedParameterData = function (oSettings) {
if (oSettings._pluginData !== undefined) {
if (oSettings._pluginData.selectedRowIndex !== undefined) {
if (oSettings._pluginData.colNames !== undefined) {
var colNames = oSettings._pluginData.colNames;
var selectedRowIndex = oSettings._pluginData.selectedRowIndex;
var row = oSettings.aoData[selectedRowIndex]._aData;
var selectedParameterData = addColsToRow(colNames, row);

return { aoDataSelected: selectedParameterData };
}
else {
return { aoDataSelected: 'no names for selected data' };
}
}
else {
return { aoDataSelected: 'no data selected' };
}
}
};

$.fn.dataTableExt.oApi.fnGetSelectedSerialize = function () {
var selectedParameterData = this.fnGetSelectedParameterData();
var serialize = $.param(selectedParameterData);

return serialize;
};
[/code]

gutzofter

paramter_plug_in.html
[code]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">





DataTables example

@import "../../media/css/demo_page.css";
@import "../../media/css/demo_table.css";





function fillDisplay(data) {
var editorData = data.aoDataSelected;
for (var index in editorData) {
$('#' + index).val(editorData[index])
}
}
$(document).ready(function() {
var selectedPosition = -1;
var colNames = ['rendering_engine', 'browser', 'platforms', 'engine_version', 'css_grade'];
var oTable = $('#example').dataTable();

oTable.fnSetColumnNames(colNames);

$('#example tbody tr').each(function() {
$(this).click(function() {
selectedPosition = oTable.fnGetPosition(this);
oTable.fnSetSelectedRow(selectedPosition);
var selectedData = oTable.fnGetSelectedParameterData();
fillDisplay(selectedData);
});
$('#post').click( function() {
var serializedData = oTable.fnGetSelectedSerialize();
var link = $('#post').attr('href');
$('#post').attr('href', link + '?' + serializedData);
} )
});
});





DataTables zero configuration example


Preamble

DataTables has most features enabled by default, so all you need to do to
use it with one of your own tables is to call the construction function (as shown below).

Live example

Posting Selected Data





Rendering engine
Browser
Platform(s)
Engine version
CSS grade




Trident
Internet
Explorer 4.0

Win 95+
4
X


Trident
Internet
Explorer 5.0

Win 95+
5
C


Trident
Internet
Explorer 5.5

Win 95+
5.5
A




Rendering engine
Browser
Platform(s)
Engine version
CSS grade





Item Display
Rendering engine:


Browser:


Platform(s):


Engine version:


CSS grade:







[/code]

gutzofter

process_click.php
[code]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">






<?php
echo print_r($_GET);
?>


[/code]