Overview

nestedDataTables v1.3.1

Copyright 2012 Zack Moore, all rights reserved. This source file is free software, under either the GPL v2 license or a BSD style license.

This source file is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the license files for details.

Depends on:

Description:

Create a series of nested dataTables.

Example

$('#myTable').nestedDataTables({
    dataSource: "WebService.asmx/GetStates",
    dataTablesOptions:
    {
        bJQueryUI: true,
    },
    columns:
        [
            { mDataProp: "StateID", nestedDataTables: { key: true, paramName: "StateID" } },
            { mDataProp: "StateName" },
            { mDataProp: "Population" }
        ],
    nestedDataTable:
        {
            dataSource: "WebService.asmx/GetCounties",
            columns:
                [
                    { mDataProp: "StateID", bVisible: false, nestedDataTables: { key: true, paramName: "StateID" } },
                    { mDataProp: "Name", nestedDataTables: { key: true, paramName: "CountyName" } },
                    { mDataProp: "AreaSqMi" },
                    { mDataProp: "Population" },
                    { mDataProp: "WebUrl" }
                ],
            nestedDataTable:
                {
                    dataSource: "WebService.asmx/GetCities",
                    columns:
                        [
                            { mDataProp: "Name" },
                            { mDataProp: "AreaSqMi" },
                            { mDataProp: "Population" },
                            { mDataProp: "WebUrl" }
                        ]
                }
        }
});

Options:

columns:

This describes the columns that should populate the dataTable. This parameter is passed directly to dataTable() so it takes the same syntax as the dataTable option aoColumns with one addition. Each element in the columns array may contain an optional parameter named nestedDataTable.

nestedDataTables:

key:

A flag indicating whether or not this column is a key. key columns may be used to query the data for the next lower table.

paramName:

Normally when calling the web service to load the next table, nestedDataTables will will take the values the key columns of the current row and pass them to the web service using the column names as the web service parameter names. Using the paramName property, you can specify a different parameter name for the column value.

dataSource:

This property specifies where to load the data for the next lower table from. This property may be a string, function, or object.

function:

If dataSource is a function, then this function will be called to load this table. The first parameter passed to this function will be the dataTable to load data into. The function must call fnAddData() on this object. See DataTables documentation. The second parameter passed to this function are the query paramters. E.g. function F(dt, wsParams) { var z = [ { a:"A", b: "B" } ]; dt.fnAddData(z); }

object:

An ajax options object. This object should follow the same syntax as an options object passed to jQuery.ajax(). If no data property is specified, one will be generated by this plugin from the current row's key columns. If no success property is specified, one is added by the plugin to load the data into the new dataTable.

When using this option, allowing this plugin to generate the data and success properties.

string:

A url for the web service to call. The web service will be called via POST. It will send the column key values to the web service as JSON and it will expect the returned data to come back as JSON data.

dataSourceParams:

Retrieve additional parameters that you would like to pass to the data source query. This option may be a function or an object.

function:

Returns an object whose properties are added to those passed to the data source query.

object:

An object whose properties are added to those passed to the data source query.

onAjaxSuccess:

        This property is a function. When set by the user, this function will be called when the ajax call succeeds and is passed the data 
        returned by the ajax call. The function should return the data that is to be passed to the datatable. This gives the user the 
        opportunity to make any changes before passing the data to the datatable.

        The default is a function that passes the data through, unless the data object has a property named 'd'. In that case the 'd' property is returned.
        This is because certain web service frameworks wrap the returned data in a container object as a security precaution.

afterAjaxSuccess:

        This property is a function. When set by the user, this function will be called after the ajax call succeeds and has finished processing.

dataTablesOptions:

Optional. Options to pass to dataTables plugin when creating each dataTable. For example, to use jQueryUI set this option to { bJQueryUI: true }

buttonClass:

CSS class to set on the button column for opening and closing nested tables. If you turn on JQueryUI support, this is set to ui-icon.

openButtonClass:

CSS class to set on the button column for opening a nested tables. If you turn on JQueryUI support, this is set to ui-icon-circle-triangle-e.

openButtonText:

Text to display in the button column for opening a nested table. If you turn on JQueryUI support, this is set to blank, otherwise it defaults to "[+]" unless set by the user.

closeButtonClass:

CSS class to set on the button column for closing a nested tables. If you turn on JQueryUI support, this is set to ui-icon-circle-triangle-s.

closeButtonText:

Text to display in the button column for closing a nested table. If you turn on JQueryUI support, this is set to blank, otherwise it defaults to "[-]" unless set by the user.

nestedDataTable:

This property specifies the child table to load when the user clicks the open icon that is the first column of the table. This property is an object that recursivly has the same properties as the plugin options, meaning that it has the properties 'columns', 'dataSource', and 'nestedDataTable'.

Functions:

reload:

Reload the nestedDataTables.

CSS Classes:

nestedDataTables: top level table

nestedDataTables-nestedTable: each table below the parent table.

nestedDataTables-buttonCol: the column in each dataTable that is a button to open the next dataTable