Column Filter, FixedColumns, and TableTools on a single table
Column Filter, FixedColumns, and TableTools on a single table
thedigitalman
Posts: 3Questions: 0Answers: 0
I am having some issues with the Column Filter extra when used in conjunction with TableTools and FixedColumns.
The issues are that only type that works properly is "select." The others that I am using, "text," "number," and "date-range" are not functioning as they should/are in the online examples.
I would appreciate any assistance in getting the to function properly.
Here is the code for DataTables:
[code]
var oTable = $('#dt-custom-report').dataTable({
"sScrollY": "280px",
"sScrollX": "100%",
"sScrollXInner": "300%",
"bScrollCollapse": true,
"bPaginate": false,
"sDom": 'T<"clear">lfrtip',
"oTableTools": {
"sSwfPath": "@Url.Content("~/Content/copy_csv_xls_pdf.swf")",
"aButtons": [
{
"sExtends": "copy",
"sToolTip": "Copy to clipboard"
},
{
"sExtends": "xls",
"sToolTip": "Export to Excel CSV"
}
]
}
})
.columnFilter({
aoColumns: [
{type: "text", sSelector: "#filter-order-number"}, // Order #
{type: "number", sSelector: "#filter-account-number"}, // Account #
{type: "select", sSelector: "#filter-category" }, // Category
{type: "select", sSelector: "#filter-service-types", values: ["Service Type 1", "Service Type 2", "Service Type 3", "Service Type 4", "Service Type 5"] }, // Service Types
{type: "select", sSelector: "#filter-reason-for-call" }, // Reason for Call
{type: "select", sSelector: "#filter-priority" }, // Priority
{type: "select", sSelector: "#filter-status" }, // Status
{type: "date-range", sSelector: "#filter-call-date", // Call Date/Time
{type: "select", sSelector: "#filter-call-taken-by" }, // Call Taken by
{type: "date-range", sSelector: "#filter-scheduled-date" }, // Scheduled Date/Time
{type: "select", sSelector: "#filter-crew" }, // Crew
{type: "date-range", sSelector: "#filter-completed-date"} // Completed Date/TIme
]
});
new FixedColumns(oTable, {
"sLeftWidth": 'relative',
"iLeftWidth": 15
});
$('.DTTT_container').addClass('btn-group');
$('.DTTT_button').addClass('btn');
[/code]
Here is my sample table data (only 1 row of data shown to save space):
[code]
Order #
Account #
Category
Service Types
Reason for Call
Priority
Status
Call Date
Call Taken by
Scheduled Date
Crew
Completed Date
SO-100000049
200000049
tellus non
Service Type 3, Service Type 5, Service Type 1
Morbi accumsan laoreet
22
On Hold
06/26/2010
Reynolds, Lee
01/09/2010
tincidunt
03/07/2013
Order #
Account #
Category
Service Types
Reason for Call
Priority
Status
Call Date/Time
Call Taken by
Scheduled Date/Time
Crew
Completed Date/Time
[/code]
Thanks in advance
The issues are that only type that works properly is "select." The others that I am using, "text," "number," and "date-range" are not functioning as they should/are in the online examples.
I would appreciate any assistance in getting the to function properly.
Here is the code for DataTables:
[code]
var oTable = $('#dt-custom-report').dataTable({
"sScrollY": "280px",
"sScrollX": "100%",
"sScrollXInner": "300%",
"bScrollCollapse": true,
"bPaginate": false,
"sDom": 'T<"clear">lfrtip',
"oTableTools": {
"sSwfPath": "@Url.Content("~/Content/copy_csv_xls_pdf.swf")",
"aButtons": [
{
"sExtends": "copy",
"sToolTip": "Copy to clipboard"
},
{
"sExtends": "xls",
"sToolTip": "Export to Excel CSV"
}
]
}
})
.columnFilter({
aoColumns: [
{type: "text", sSelector: "#filter-order-number"}, // Order #
{type: "number", sSelector: "#filter-account-number"}, // Account #
{type: "select", sSelector: "#filter-category" }, // Category
{type: "select", sSelector: "#filter-service-types", values: ["Service Type 1", "Service Type 2", "Service Type 3", "Service Type 4", "Service Type 5"] }, // Service Types
{type: "select", sSelector: "#filter-reason-for-call" }, // Reason for Call
{type: "select", sSelector: "#filter-priority" }, // Priority
{type: "select", sSelector: "#filter-status" }, // Status
{type: "date-range", sSelector: "#filter-call-date", // Call Date/Time
{type: "select", sSelector: "#filter-call-taken-by" }, // Call Taken by
{type: "date-range", sSelector: "#filter-scheduled-date" }, // Scheduled Date/Time
{type: "select", sSelector: "#filter-crew" }, // Crew
{type: "date-range", sSelector: "#filter-completed-date"} // Completed Date/TIme
]
});
new FixedColumns(oTable, {
"sLeftWidth": 'relative',
"iLeftWidth": 15
});
$('.DTTT_container').addClass('btn-group');
$('.DTTT_button').addClass('btn');
[/code]
Here is my sample table data (only 1 row of data shown to save space):
[code]
Order #
Account #
Category
Service Types
Reason for Call
Priority
Status
Call Date
Call Taken by
Scheduled Date
Crew
Completed Date
SO-100000049
200000049
tellus non
Service Type 3, Service Type 5, Service Type 1
Morbi accumsan laoreet
22
On Hold
06/26/2010
Reynolds, Lee
01/09/2010
tincidunt
03/07/2013
Order #
Account #
Category
Service Types
Reason for Call
Priority
Status
Call Date/Time
Call Taken by
Scheduled Date/Time
Crew
Completed Date/Time
[/code]
Thanks in advance
This discussion has been closed.
Replies
Regards,
Allan