If I have some foreign characters (Norwegian) in a field it is returned as null in the json response. The database and table are UTF-8. Also the encoding of the HTML page and PHP script page (using server-side) is UTF-8. Any idea how I fix this? If the field content is "Oslo" it is returned, if it is "Ås" it is returned as null.
↧
mysql fields with foreign characters returned as null
↧
Body columns don't align with head columns only in firefox.
Hi, there
I'm testing almost the same as the example "row grouping using the fixed column" http://datatables.net/release-datatables/extras/FixedColumns/row_grouping_height.html ( I have rowspan header)
Everything is fine but when I test it on firefox the body columns not align with headers.
I tested them on ie/chrome both are works fine.
And another strange thing is that if i type in search sth the table rebuild to the correct way in firefox.
I'm using firefox 27.0.1
Anybody aware what's going on?
Thanks
I'm testing almost the same as the example "row grouping using the fixed column" http://datatables.net/release-datatables/extras/FixedColumns/row_grouping_height.html ( I have rowspan header)
Everything is fine but when I test it on firefox the body columns not align with headers.
I tested them on ie/chrome both are works fine.
And another strange thing is that if i type in search sth the table rebuild to the correct way in firefox.
I'm using firefox 27.0.1
Anybody aware what's going on?
Thanks
↧
↧
Missing oScroller
'sDom' : '<"fg-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"fr>t<"fg-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix"iT>S',
but I have no scroller:
settings.oScroller; is undefined?
The JavaScript console show no errors of any type
but I have no scroller:
grid.fixupTable = function() {
// fix the height to 10 rows, probably should be a variable
var settings = grid.fnSettings();
var scroller = settings.oScroller;
grid.parent().height(scroller.fnRowToPixels(settings.numRows));
grid.fnAdjustColumnSizing();
var oTT = TableTools.fnGetInstance( grid[0] );
oTT.fnResizeButtons();
if (oSettings.oFeatures.bSort) {
grid.fnSort(oSettings.aaSorting);
}
if (grod.oldTop != 0) {
var scroller = grid.parent()[0];
scroller.scrollTop = grid.oldTop;
}
}
settings.oScroller; is undefined?
The JavaScript console show no errors of any type
↧
ASP MVC DataTables - No Errors No rows displayed
Hi Allan, or anyone who may be able to give advice -
I'm working to implement DataTables in an ASP MVC project I'm working on.
I seem to have everything set up properly, but I'm not seeing any data getting loaded into the table. I'm using AJAX Source, the debug data link is: http://debug.datatables.net/ewupij
Here's some of the code for reference:
Table:
Here is the JS:
The Json that is returned from the server is in the debugger link at the top of this post
I originally had errors, but worked through all of them. I've tried using bServerSide, tried having each row of data in the json be an array rather than an object, tried declaring aoColumns and specifying mDataProp: 0, mDataProp: 1, etc, tried putting empty rows inside of tbody.....all with no luck.
I have absolutely no errors, no warnings, and no data being displayed, but as the debugger data shows proper json is returning. I should note that I am using jQuery 1.11, I'm about to try jQuery 1.10.2 but it'd be cool if we could have it working in jQuery 1.11 too! I've tested in IE, Chrome, and FF with the same results.
Thanks in advance!
EDIT**
Tested in jQuery 1.10.2 and same problem - No errors, warning, or data within the Table.
I'm working to implement DataTables in an ASP MVC project I'm working on.
I seem to have everything set up properly, but I'm not seeing any data getting loaded into the table. I'm using AJAX Source, the debug data link is: http://debug.datatables.net/ewupij
Here's some of the code for reference:
Table:
<table id="DataTableActiveCampaignsByGroup" class="display dataTable" >
<thead>
<tr>
<th>Record Id</th>
<th>@Html.DisplayNameFor( model => model.CampaignName )</th>
<th>@Html.DisplayNameFor( model => model.StartDate )</th>
<th>@Html.DisplayNameFor( model => model.StopDate )</th>
<th>@Html.DisplayNameFor( model => model.CampaignType )</th>
<th>@Html.DisplayNameFor( model => model.CampaignValue )</th>
<th>@Html.DisplayNameFor( model => model.Manufacturer )</th>
<th>@Html.DisplayNameFor( model => model.GroupId )</th>
<th>@Html.DisplayNameFor( model => model.ProductLineId )</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<th>Record Id</th>
<th>@Html.DisplayNameFor( model => model.CampaignName )</th>
<th>@Html.DisplayNameFor( model => model.StartDate )</th>
<th>@Html.DisplayNameFor( model => model.StopDate )</th>
<th>@Html.DisplayNameFor( model => model.CampaignType )</th>
<th>@Html.DisplayNameFor( model => model.CampaignValue )</th>
<th>@Html.DisplayNameFor( model => model.Manufacturer )</th>
<th>@Html.DisplayNameFor( model => model.GroupId )</th>
<th>@Html.DisplayNameFor( model => model.ProductLineId )</th>
</tr>
</tfoot>
</table>
Here is the JS:
$( '#' + options['viewport'] ).dataTable // options[viewport] is the id of the table displayed above.
(
{
"bJQueryUI": true,
"bProcessing": true,
//"bServerSide": true,
"sAjaxSource": url,
"sPaginationType": "full_numbers",
"iDisplayLength": "25",
"sDefaultContent": " "
}
);
The Json that is returned from the server is in the debugger link at the top of this post
I originally had errors, but worked through all of them. I've tried using bServerSide, tried having each row of data in the json be an array rather than an object, tried declaring aoColumns and specifying mDataProp: 0, mDataProp: 1, etc, tried putting empty rows inside of tbody.....all with no luck.
I have absolutely no errors, no warnings, and no data being displayed, but as the debugger data shows proper json is returning. I should note that I am using jQuery 1.11, I'm about to try jQuery 1.10.2 but it'd be cool if we could have it working in jQuery 1.11 too! I've tested in IE, Chrome, and FF with the same results.
Thanks in advance!
EDIT**
Tested in jQuery 1.10.2 and same problem - No errors, warning, or data within the Table.
↧
Unwanted repeated calls to function handling row clicks
I am having an issue while using datatables 1.9.3 here at the office.
my function to handle a clicked row is as follows :
function update_row_data(row_number)
{
\$(document).ready(function() {
oTable = \$('#tracking_table').dataTable();
oTable.\$('tr').click( function () {
var row_index = oTable.fnGetPosition(this);
alert("You clicked on row [" + row_index + "]");
var rowdata = oTable.fnGetData(this);
var count = rowdata.length;
alert("number of columns in row data array are " + count);
var lastcell = rowdata[count-1];
alert("value of last cell in row is : " + lastcell);
oTable.fnUpdate( [ rowdata[0] , rowdata[1] , rowdata[2] , rowdata[3] , rowdata[4] , rowd
ata[5] , rowdata[6] , rowdata[7] , rowdata[8] , 'my updated descr' ] , this); // update row
} );
} );
}
I am finding that when i click on a 2nd row to update its data that 2nd row is processed twice and if I click on a 3rd row it is processed 3 times. How can I "clear out" the queue/list of "clicked events" inside my click handling function ? Or is there a better way to not have duplicate calls to the click handling function ?
Thanks.
my function to handle a clicked row is as follows :
function update_row_data(row_number)
{
\$(document).ready(function() {
oTable = \$('#tracking_table').dataTable();
oTable.\$('tr').click( function () {
var row_index = oTable.fnGetPosition(this);
alert("You clicked on row [" + row_index + "]");
var rowdata = oTable.fnGetData(this);
var count = rowdata.length;
alert("number of columns in row data array are " + count);
var lastcell = rowdata[count-1];
alert("value of last cell in row is : " + lastcell);
oTable.fnUpdate( [ rowdata[0] , rowdata[1] , rowdata[2] , rowdata[3] , rowdata[4] , rowd
ata[5] , rowdata[6] , rowdata[7] , rowdata[8] , 'my updated descr' ] , this); // update row
} );
} );
}
I am finding that when i click on a 2nd row to update its data that 2nd row is processed twice and if I click on a 3rd row it is processed 3 times. How can I "clear out" the queue/list of "clicked events" inside my click handling function ? Or is there a better way to not have duplicate calls to the click handling function ?
Thanks.
↧
↧
Use of sScrollX creates duplicate table header id's, causing accessibility WCAG 2.0 A to fail.
Firstly, would like to say thanks for a great plugin!
I do have an issue that I struggling to resolve ;o(
My table has to conform to WCAG 2.0 AA standard.
I encounter an issue when id’s have been entered into my table header tags and the sScrollX option has been utilised, this combination causes the id’s to be duplicated within the table(s) and therefore causes the accessibility check to fail.
Here is an example of my table source code with the table header tags:
I’m aware that when the sScrollX option is utilised, the table is split into three separate tables, but this is where I encounter my accessibility issue.
When I view the source or view the code in Firebug, the table header has been duplicated in both the dataTables_scrollHead and dataTables_scrollBody, which fails the accessibility check:
“ID must be unique.”
Please find below the output code to showcase this issue:
The first piece of code is the output for the dataTables_scrollHead (I have only cut three table headers as there is a lot of code.)
The second piece of code is the output for the dataTables_scrollBody (I have only cut three table headers as there is a lot of code.)
Your help would be much appreciated.
I do have an issue that I struggling to resolve ;o(
My table has to conform to WCAG 2.0 AA standard.
I encounter an issue when id’s have been entered into my table header tags and the sScrollX option has been utilised, this combination causes the id’s to be duplicated within the table(s) and therefore causes the accessibility check to fail.
Here is an example of my table source code with the table header tags:
<table id="all-users" class="data-table left"> <thead> <tr> <th id="firstname">First Name</th> <th id="surname">Surname</th> <th id="usertype">User Type</th> <th id="email">Email Address</th> <th id="username">User Name</th> <th id="telephone">Telephone Number</th> <th id="centrename">Centre Name</th> <th id="currentstatus">Current Status</th> <th id="action">Action</th> </tr> </thead> <tbody> <tr> <td headers="firstname">Joe</td> <td headers="surname">Bloggs</td> <td headers="usertype">Admin</td> <td headers="email">jbloggs@verelogic.com</td> <td headers="username">jbloggs</td> <td headers="telephone">01793 411111</td> <td headers="centrename">DAO Administrator</td> <td headers="currentstatus">Enabled</td> <td headers="action"><a href="#" title="Edit Record - Joe Bloggs" alt="Edit Record - Joe Bloggs" class="icon-space icon-file"><span class="icon-pencil-2 small-icon" aria-hidden="true"></span><span class="screen-reader-text">Edit Record - Joe Bloggs</span></a><a href="#" class="icon-user-2" title="Modify User - Joe Bloggs" alt="Modify User - Joe Bloggs"><span class="icon-pencil-2 small-icon" aria-hidden="true"></span><span class="screen-reader-text">Modify User - Joe Bloggs</span></a></td> </tr> </tbody> </table>
I’m aware that when the sScrollX option is utilised, the table is split into three separate tables, but this is where I encounter my accessibility issue.
When I view the source or view the code in Firebug, the table header has been duplicated in both the dataTables_scrollHead and dataTables_scrollBody, which fails the accessibility check:
“ID must be unique.”
Please find below the output code to showcase this issue:
The first piece of code is the output for the dataTables_scrollHead (I have only cut three table headers as there is a lot of code.)
<div class="dataTables_scrollHead ui-state-default" style="overflow: hidden; position: relative; border: 0px none; width: 100%;"> <div class="dataTables_scrollHeadInner" style="width: 1039px; padding-right: 0px;"> <table class="data-table left dataTable" style="margin-left: 0px; width: 1039px;"> <thead> <tr role="row"> <th id="firstname" class="ui-state-default" role="columnheader" tabindex="0" aria-controls="all-users" rowspan="1" colspan="1" aria-sort="ascending" aria-label="First Name - click/return to sort descending" style="width: 80px;"> <div class="DataTables_sort_wrapper">First Name<span class="DataTables_sort_icon css_right ui-icon ui-icon-triangle-1-n"></span></div> </th> <th id="surname" class="ui-state-default" role="columnheader" tabindex="0" aria-controls="all-users" rowspan="1" colspan="1" aria-label="Surname - click/return to sort ascending" style="width: 68px;"> <div class="DataTables_sort_wrapper">Surname<span class="DataTables_sort_icon css_right ui-icon ui-icon-carat-2-n-s"></span></div> </th> <th id="usertype" class="ui-state-default" role="columnheader" tabindex="0" aria-controls="all-users" rowspan="1" colspan="1" aria-label="User Type - click/return to sort ascending" style="width: 75px;"> <div class="DataTables_sort_wrapper">User Type<span class="DataTables_sort_icon css_right ui-icon ui-icon-carat-2-n-s"></span></div> </th>
The second piece of code is the output for the dataTables_scrollBody (I have only cut three table headers as there is a lot of code.)
<div class="dataTables_scrollBody" style="overflow: auto; width: 100%;"> <table class="data-table left dataTable" id="all-users" style="margin-left: 0px; width: 1039px;" aria-describedby="all-users_info"> <thead> <tr role="row" style="height: 0px;"> <th id="firstname" class="ui-state-default" role="columnheader" tabindex="0" aria-controls="all-users" rowspan="1" colspan="1" aria-sort="ascending" aria-label="First Name - click/return to sort descending" style="padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px; width: 80px;"> </th> <th id="surname" class="ui-state-default" role="columnheader" tabindex="0" aria-controls="all-users" rowspan="1" colspan="1" aria-label="Surname - click/return to sort ascending" style="padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px; width: 68px;"> </th> <th id="usertype" class="ui-state-default" role="columnheader" tabindex="0" aria-controls="all-users" rowspan="1" colspan="1" aria-label="User Type - click/return to sort ascending" style="padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px; width: 75px;"> </th>
Your help would be much appreciated.
↧
mRender giving an initial error
I am using the mRender to display a count (not coming back in my ajax call) and a button (using a value in my data that I am not displaying). When i initially load the page, I get the following error: "DataTables warning (table id = 'example'): Requested unknown parameter '1' from the data source for row0."
After I get the error though, the page does display correctly. How do I get rid of the error?
Here is my ajax call:
success:function(data){
oTable = $('#example').dataTable( {
"bProcessing": true,
"aaData": data,
"aoColumns": [
{
"mData": null,
"sClass": "control center",
"sDefaultContent": '<img src="'+sImageUrl+'details_open.png'+'">'
},
{ "mRender": function(data,type, row) {
return getProjectCount(row.prg_guid);
}
},
{ "mData": "prg_name" },
{ "mData": "market" },
{ "mData": "beta_date" },
{ "mData": "rtc_date" },
{ "mRender": function(data, type, row) {
if (row.prj_guid != ""){
return "<a target='_blank' href='https://ifp.wdf.sap.corp/sap/bc/webdynpro/sap/cprojects?View=Projects&OBJECT_TYPE=DPO&GUID="+row.prj_guid+"&DetailView=DPO&sap-language=en'; class='btn btn-primary btn-sm '>Open in cPro</a>";
} else
return "No cPro";
}
}
]
} );
}
I am hopefully using the mRender properly.....
After I get the error though, the page does display correctly. How do I get rid of the error?
Here is my ajax call:
success:function(data){
oTable = $('#example').dataTable( {
"bProcessing": true,
"aaData": data,
"aoColumns": [
{
"mData": null,
"sClass": "control center",
"sDefaultContent": '<img src="'+sImageUrl+'details_open.png'+'">'
},
{ "mRender": function(data,type, row) {
return getProjectCount(row.prg_guid);
}
},
{ "mData": "prg_name" },
{ "mData": "market" },
{ "mData": "beta_date" },
{ "mData": "rtc_date" },
{ "mRender": function(data, type, row) {
if (row.prj_guid != ""){
return "<a target='_blank' href='https://ifp.wdf.sap.corp/sap/bc/webdynpro/sap/cprojects?View=Projects&OBJECT_TYPE=DPO&GUID="+row.prj_guid+"&DetailView=DPO&sap-language=en'; class='btn btn-primary btn-sm '>Open in cPro</a>";
} else
return "No cPro";
}
}
]
} );
}
I am hopefully using the mRender properly.....
↧
Json without aaData
Is there a way to work with Datatables with sAjaxSource where the returned JSON has no aaData?
My table:
My javascript:
The JSON returned by http://localhost:8080/bookmark-html5/api/bookmark:
The following error is occurring in the browser:
Thanks!
My table:
<table id="example"> <thead> <tr> <th width="2%">Id</th> <th width="49%">Description</th> <th width="49%">Link</th> </tr> </thead> <tbody> </tbody> </table>
My javascript:
$('#exemplo').dataTable({
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "api/bookmark",
"sAjaxDataProp": "",
"aoColumns": [
{ "mData": "id" },
{ "mData": "description" },
{ "mData": "link" }
]
});
The JSON returned by http://localhost:8080/bookmark-html5/api/bookmark:
[
{
"id": 10,
"description": "Demoiselle Portal",
"link": "www.frameworkdemoiselle.gov.br"
},
{
"id": 11,
"description": "Demoiselle SourceForge",
"link": "sf.net/projects/demoiselle"
}
]
The following error is occurring in the browser:
Uncaught TypeError: Cannot read property 'length' of undefined
Thanks!
↧
Uncaught TypeError: Cannot read property 'style' of undefined while using colspan
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0 ,maximum-scale=1.0 ,minimum-scale=1 ,user-scalable=0" />
</head>
<body>
<div data-role="page" data-theme="b" id="S2" data-overlay-theme="c">
<div id="wrapper">
<div id="scroller">
<div id="spin" style="display:none;"></div>
<div data-role="content">
<table id="table_id">
<thead>
<tr>
<th colspan="2">Engine</th>
<th>Browser</th>
<th>Platform</th>
<th>Version</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Engine1</td>
<td>sub - engine1</td>
<td>Browser1</td>
<td>Platform1</td>
<td>Version1</td>
<td>Grade1</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
after applying datatable plugin for the above table (colspan used table) it gives an error
Uncaught TypeError: Cannot read property 'style' of undefined in line no.3255 (line mentioned below)
nThs[i].style.width = o.aoColumns[iVis].sWidth;
I applied a validation line for that like
if(nThs[i] !== undefined) nThs[i].style.width = o.aoColumns[iVis].sWidth;
and it works fine!!!!
Is that ok Alan? If so please recommend it to others to use
↧
↧
Need help with saving row data when clicked on & saving the state from one tab to another tab
Hi,
I am very new to datatables. I have a JSON data that is passed to in response to AJAX call, and then, invoke the datatables on the json data as follows, and activate one tab of the page to contain the output of this datatable. I have couple of problems:
1. When the user selects a particular row, I need to keep track of the row data in a datastructure. Is there a better way to do it than what I doing below? How can we have the oTable.$('tr').click(function() to be defined out of the Ajax post response?
2. When the page tab which contains the output of the below datatable is switched with another tab, then, the oTable.$('tr').click(function() doesn't work anymore? Is there a solution or another option to do it?
3. If we need to have columns within columns, how can we do it with Datatables?
Can some one provide me some pointers for the above questions, which would be really helpful to me...
I am very new to datatables. I have a JSON data that is passed to in response to AJAX call, and then, invoke the datatables on the json data as follows, and activate one tab of the page to contain the output of this datatable. I have couple of problems:
1. When the user selects a particular row, I need to keep track of the row data in a datastructure. Is there a better way to do it than what I doing below? How can we have the oTable.$('tr').click(function() to be defined out of the Ajax post response?
2. When the page tab which contains the output of the below datatable is switched with another tab, then, the oTable.$('tr').click(function() doesn't work anymore? Is there a solution or another option to do it?
3. If we need to have columns within columns, how can we do it with Datatables?
Can some one provide me some pointers for the above questions, which would be really helpful to me...
success: function(response) {
oTable = $("#example_table_id").dataTable({
"bProcessing": true,
"bAutoWidth": false,
"iDisplayLength": 10,
"aoColumns": response.aoColumns,
"aaData": response.aaData
});
//Register event handling for when the row is clicked on:
var oTableData=new Array();
oTable.$('tr').click(function() {
var oData = oTable
.fnGetData(this);
console.log(oData);
var index = oTableData
.indexOf(oData);
if (index != -1) {
oTableData.splice(index, 1);
} else {
oTableData.push(oData);
}
console.log(oTableData);
});
}
↧
Jquery version compatibility with DataTables 1.9.4
Hi all, we are using jQuery 1.7.1, is it compatible with the 1.9.4 release of DataTables?
↧
filter & info boxes sticked to the right & left window borders
hello
My table has a width of 1000px and is centered, but with these values, the filter and the info _box are at sticked to the right & left border of the screen. what should I do to avoid that?
here is the table:
& here is the js code:
thanks.
My table has a width of 1000px and is centered, but with these values, the filter and the info _box are at sticked to the right & left border of the screen. what should I do to avoid that?
here is the table:
<div id="demo"> <table id="aTable" width="1000px" align="center" border="0" cellpadding="0" cellspacing="0" class="display"> <thead> <tr> <th>Nom</th> <th>Prénom</th>...
& here is the js code:
<script type="text/javascript">
$(document).ready(function() {
$('#aTable').dataTable({
"bPaginate": false
});
});
</script>
thanks.
↧
Cannot set column width while using filters
I am attempting to set column width while using filters...The filters are a row in the thead , so my thead has 2 rows. However, the aoColumns are not being applied. If I remove one of the rows (say the filter row) so that the thead only has a single row, everything works as expected.
My question is: Is there any way to set the column width with 2 rows in the header
Is there some other way to approach this? I have put both the filter and column title in the same <th>, but it doesn't look as nice and that's not what I want...I actually want the filter to be a different row. Below is my code
My question is: Is there any way to set the column width with 2 rows in the header
Is there some other way to approach this? I have put both the filter and column title in the same <th>, but it doesn't look as nice and that's not what I want...I actually want the filter to be a different row. Below is my code
<div style="width: 100%">
<table id="reviewRequests" >
<thead>
<tr>
<th><input type="text" name="search_participant" size="10" placeholder="Filter Participant" class="search_init" /></th>
<th>
<select name="search_status">
<option value=""></option>
<c:forEach items="${requestStatuses}" var="requestStatus">
<option value="${requestStatus.eventRequestStatusLabel}">${requestStatus.eventRequestStatusLabel}</option>
</c:forEach>
</select>
</th>
<th><input type="text" name="search_org" size="10" placeholder="Filter Org" class="search_init" /></th>
<th><input type="text" name="search_mgr" size="10" placeholder="Filter Manager" class="search_init" /></th>
<th><input type="text" name="search_title" size="20" placeholder="Filter Titles" class="search_init" /></th>
<th><input type="text" name="search_city" placeholder="Filter City" class="search_init" /></th>
<th><input type="text" name="search_state" size="12" placeholder="Filter State" class="search_init" /></th>
<th><input type="text" name="search_country" size="12" placeholder="Filter Country" class="search_init" /></th>
<th>
<select name="search_role">
<option value=""></option>
<c:forEach items="${attendeeRoleTypes}" var="roleType">
<option value="${roleType.attendeeRoleTypeLabel}">${roleType.attendeeRoleTypeLabel}</option>
</c:forEach>
</select>
</th>
<th><input type="text" name="search_travelCost" size="20" placeholder="Filter Cost" class="search_init" /></th>
<th><input type="text" name="search_registrationCost" size="20" placeholder="Filter Cost" class="search_init" /></th>
<th><input type="text" name="search_startDate" size="10" placeholder="Filter Date" class="search_init" /></th>
</tr>
<tr>
<th>Participant</th>
<th>Request Status</th>
<th>Org</th>
<th>Mgr</th>
<th>Event Title</th>
<th>City</th>
<th>State</th>
<th>Country</th>
<th>Role</th>
<th>Travel $</th>
<th>Registration $</th>
<th>Event Start Date</th>
</tr>
</thead>
<tbody>
<c:forEach items="${events}" var="event">
<tr id='row_<c:out value="${event.eventRequestId}"/>'>
<td><c:out value="${event.attendeeName}"/></td>
<td><c:out value="${event.statusName}" escapeXml="true" /></td>
<td>
<c:out value="${event.attendeeOrgNum}" escapeXml="true" />
</td>
<td><c:out value="${event.managerName}" escapeXml="true" /></td>
<td><c:out value="${event.eventTitle}" escapeXml="true" /></td>
<td>
<c:if test="${event.cityName ne null and event.cityName ne 'Other'}"><c:out value="${event.cityName}" escapeXml="true" /></c:if>
<c:if test="${event.cityName eq 'Other'}"><c:out value="${event.otherCity}" escapeXml="true" /></c:if>
</td>
<td><c:out value="${event.stateId}" escapeXml="true" /></td>
<td><c:out value="${event.countryName}" escapeXml="true" /></td>
<td><c:out value="${event.roleName}" escapeXml="true" /></td>
<td><c:out value="${event.totalRegistrationCost}" escapeXml="true" /></td>
<td><c:out value="${event.totalTravelCost}" escapeXml="true" /></td>
<td><fmt:formatDate value="${event.startDate}" type="date" pattern="MM/dd/yyyy" /></td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
↧
↧
Destroy the datatable doesn't reset the column's visible setting
Hi all,
I used
I used
oTable.fnDestroy()to destroy table and reinitialise table. But the column's visible setting didn't reset.
↧
pre sort callback
Hello!
I have a page with a datatable. There is also a process that update directly the DOM of my table. I have no control over this process.
The table is sortable. But I think that the sorting mechanism of datatable is based upon the 'internal' stored data, that is different from the updated DOM.
So i've found the plugin "fnDataUpdate" that seems to solve the problem: it updates the internal stored data of datatable with the actual DOM content.
Now i have to apply the fnDataUpdate method before sort happen... but i can't found any callback to do this.
Searching for similar questions, i've found the 'fnDrawCallback' or 'fnPreDrawCallback' methods, but both doesn't function.
I've tried to bind the callback on the 'sort' event, but this is called after the sort is completed :/
Any suggestion?
Thank you very much :)
Here is a jsFiddle link
http://jsfiddle.net/4qtjJ/
to reproduce the problem:
1. click on the start button and wait the td change value
2. click again on the button to stop the process
3. click on 'Column' to do the sort (wrong)
4. uncomment the METHOD 1 or METHOD 2, run again the fiddle and do the steps 1. 2. 3.
5. observe that with METHOD 1 or METHOD 2 only the very first sort don't function.
this is because the fnDataUpdate is correctly executed... but AFTER the first sort happen, so its effect are visible from the second sort...
I have a page with a datatable. There is also a process that update directly the DOM of my table. I have no control over this process.
The table is sortable. But I think that the sorting mechanism of datatable is based upon the 'internal' stored data, that is different from the updated DOM.
So i've found the plugin "fnDataUpdate" that seems to solve the problem: it updates the internal stored data of datatable with the actual DOM content.
Now i have to apply the fnDataUpdate method before sort happen... but i can't found any callback to do this.
Searching for similar questions, i've found the 'fnDrawCallback' or 'fnPreDrawCallback' methods, but both doesn't function.
I've tried to bind the callback on the 'sort' event, but this is called after the sort is completed :/
Any suggestion?
Thank you very much :)
Here is a jsFiddle link
http://jsfiddle.net/4qtjJ/
to reproduce the problem:
1. click on the start button and wait the td change value
2. click again on the button to stop the process
3. click on 'Column' to do the sort (wrong)
4. uncomment the METHOD 1 or METHOD 2, run again the fiddle and do the steps 1. 2. 3.
5. observe that with METHOD 1 or METHOD 2 only the very first sort don't function.
this is because the fnDataUpdate is correctly executed... but AFTER the first sort happen, so its effect are visible from the second sort...
↧
aoColumnDefs, sClass and aTargets (using class name) doesn't work.
I am trying to use "aoColumnDefs" with "sClass" and "aTargets" (using the class name) and it doesn't seem to work.
When I debugged the jQuery.DataTables.js code I found that line 433 was always returning "false" for .hasClass().
Here is my Datatables live example:
http://live.datatables.net/bepesey/1/edit
Test Code Sample:
When I debugged the jQuery.DataTables.js code I found that line 433 was always returning "false" for .hasClass().
432 if ( aTargets[j] == "_all" || 433 $(oSettings.aoColumns[k].nTh).hasClass( aTargets[j] ) )
Here is my Datatables live example:
http://live.datatables.net/bepesey/1/edit
Test Code Sample:
$(document).ready( function () {
var table = $('#example').DataTable(
{
"aoColumns": [
{"sTitle":"myTitle" ,"sClass": "myClass" },
null,
null,
null,
null,
null
],
"aoColumnDefs": [
{
"mRender": function ( data, type, row ) {
return '<span style=color:red;>'+data+'</span>';
},"aTargets": ['myClass']
}
]
}
);
} );
↧
[COMPLETE SOLUTION] - Passing Filtered and/or Paginated Form Fields with Optional Check All Feature
I'm posting this "complete solution" (hopefully it is for the vast majority of you) of how to handle passing form fields that are visible or hidden (due to pagination or filtering) and optionally, having a "check all" checkbox. I spent the last few days culling together various bits to come to this complete solution that met all my needs - hopefully it will save others time in future and possibly help less experienced users understand what is possible with the power of dataTables. Let's get started.
PROBLEM: You need to pass form fields (usually in the form of a checkbox) from rows in your dataTable to another script via a FORM. You need to account for not only form fields that are not visible (say due to pagination or filtering), but also the visible fields as well. A "check all" feature would aid users with large datasets if they wanted to do a "check all", filtering or not.
It's important to understand dataTables removes hidden nodes (aka rows in your dataTable) from the DOM, so simply wrapping a FORM around your dataTable will NOT pass all the checkboxes that are there - it will only pass the visible ones (visible because of the current page in the pagination set you are viewing, or due to filtering of the dataset, or a combination of both).
By including two plugins (one of which is detailed in the dataTables API) (http://datatables.net/plug-ins/api), we can solve these issues.
To include these plugins, you must save the following code to a .js file, or include them BEFORE you initialize the dataTable (e.g.: before the $('yourtable').dataTable() in your script block). If you are including them as a file, they must come AFTER jQuery, and AFTER the dataTables JS script includes. For example:
Notice the two filenames - fnGetHiddenNodes and fnGetFilteredNodes - each one handles different aspects of our problem, and as you might surmise, the fnGetHiddenNodes handles any nodes that are hidden (by pagination), and fnGetFilteredNodes handles any nodes that are filtered (whether they are hidden by pagination or not).
Since fnGetFilteredNodes is not in the API Documentation (the link I provided above), here is the script:
fnGetHiddenNodes is available in the API documentation, but here it is anyway for convenience:
Now, in order to implement the "check all" feature, you'll need an input in your dataTable output - there's a million different ways to do this, but here's the code I use:
This input (which you can put in the TH section of your TABLE) will be what the user will click on to select all the checkboxes in the data set (visible or not, filtered or not).
Here's the script that initializes your dataTable, and also implements the check all feature, and the calls to ensure the checked fields (whether hidden, filtered, or not) are passed to your form:
Assuming your FORM is wrapped around your TABLE in your HTML output, this should work with no problems. Please note the fields are submitted when a user clicks on your FORM's SUBMIT button, after they have clicked on at least one checkbox in your TABLE output or the checkbox to select all checkboxes.
Huge thanks to everyone (especially Allan) who contributed portions of the above solution, and I hope posting it here all together helps others and saves time!
PROBLEM: You need to pass form fields (usually in the form of a checkbox) from rows in your dataTable to another script via a FORM. You need to account for not only form fields that are not visible (say due to pagination or filtering), but also the visible fields as well. A "check all" feature would aid users with large datasets if they wanted to do a "check all", filtering or not.
It's important to understand dataTables removes hidden nodes (aka rows in your dataTable) from the DOM, so simply wrapping a FORM around your dataTable will NOT pass all the checkboxes that are there - it will only pass the visible ones (visible because of the current page in the pagination set you are viewing, or due to filtering of the dataset, or a combination of both).
By including two plugins (one of which is detailed in the dataTables API) (http://datatables.net/plug-ins/api), we can solve these issues.
To include these plugins, you must save the following code to a .js file, or include them BEFORE you initialize the dataTable (e.g.: before the $('yourtable').dataTable() in your script block). If you are including them as a file, they must come AFTER jQuery, and AFTER the dataTables JS script includes. For example:
<script type="text/javascript" src="/js/jquery.dataTables.min.js"></script> <script type="text/javascript" src="/js/dataTables.fnGetHiddenNodes.js"></script> <script type="text/javascript" src="/js/dataTables.fnGetFilteredNodes.js"></script>
Notice the two filenames - fnGetHiddenNodes and fnGetFilteredNodes - each one handles different aspects of our problem, and as you might surmise, the fnGetHiddenNodes handles any nodes that are hidden (by pagination), and fnGetFilteredNodes handles any nodes that are filtered (whether they are hidden by pagination or not).
Since fnGetFilteredNodes is not in the API Documentation (the link I provided above), here is the script:
$.fn.dataTableExt.oApi.fnGetFilteredNodes = function ( oSettings )
{
var anRows = [];
for ( var i=0, iLen=oSettings.aiDisplay.length ; i<iLen ; i++ )
{
var nRow = oSettings.aoData[ oSettings.aiDisplay[i] ].nTr;
anRows.push( nRow );
}
return anRows;
};
copy the above into a new file and save it as dataTables.fnGetFilteredNodes.js and follow the inclusion instructions previously mentioned.fnGetHiddenNodes is available in the API documentation, but here it is anyway for convenience:
$.fn.dataTableExt.oApi.fnGetHiddenNodes = function ( oSettings )
{
/* Note the use of a DataTables 'private' function thought the 'oApi' object */
var anNodes = this.oApi._fnGetTrNodes( oSettings );
var anDisplay = $('tbody tr', oSettings.nTable);
/* Remove nodes which are being displayed */
for ( var i=0 ; i<anDisplay.length ; i++ )
{
var iIndex = jQuery.inArray( anDisplay[i], anNodes );
if ( iIndex != -1 )
{
anNodes.splice( iIndex, 1 );
}
}
/* Fire back the array to the caller */
return anNodes;
};
Now, in order to implement the "check all" feature, you'll need an input in your dataTable output - there's a million different ways to do this, but here's the code I use:
<input name="Custodians" type="checkbox" value="All" class="checkall">
This input (which you can put in the TH section of your TABLE) will be what the user will click on to select all the checkboxes in the data set (visible or not, filtered or not).
Here's the script that initializes your dataTable, and also implements the check all feature, and the calls to ensure the checked fields (whether hidden, filtered, or not) are passed to your form:
$(document).ready(function () {
oTable = $('#LHQResponses').dataTable();
} );
$('form[name=yourformsnameattribute]').submit(function(){ //replace 'yourformsnameattribute' with the name of your form
$(oTable.fnGetHiddenNodes()).find('input:checked').appendTo(this); //this is what passes any hidden nodes to your form when a user clicks SUBMIT on your FORM
} );
$('.checkall').click( function() { //this is the function that will mark all your checkboxes when the input with the .checkall class is clicked
$('input', oTable.fnGetFilteredNodes()).attr('checked',this.checked); //note it's calling fnGetFilteredNodes() - this is so it will mark all nodes whether they are filtered or not
} );
Assuming your FORM is wrapped around your TABLE in your HTML output, this should work with no problems. Please note the fields are submitted when a user clicks on your FORM's SUBMIT button, after they have clicked on at least one checkbox in your TABLE output or the checkbox to select all checkboxes.
Huge thanks to everyone (especially Allan) who contributed portions of the above solution, and I hope posting it here all together helps others and saves time!
↧
↧
Performance questions: lazy initialization + striping
I like DataTables, and for small tables, it is the best I have come across so far. For large tables, especially in combination with older browsers like IE8, but even newer ones, it is slow.
Is there a switch or variable which allows me to do lazy initialization of DataTables?
I frequently use DataTables just for sorting tables, so no pagination, no searches, ... As users often have no need to sort columns, it would be nice if the initialization of DataTables would be postponed until the first time the user actually clicks on a column header and requests a sort. This would of course make this 'first' sort a lot slower, but that is something that users can comprehend as they know something is going on based on a request they made. The initialization DataTables does on startup by default just seems like a performance issue to them.
Is there a switch to indicate that the original table is already striped?
I can set the 'even' and 'odd' classes (or whatever stripe classes you want) while generating the table. There is no need for DataTables to go over all rows and call the jquery addClass and removeClass functions. According to my profiling, this costs a lot of time.
Is there a switch or variable which allows me to do lazy initialization of DataTables?
I frequently use DataTables just for sorting tables, so no pagination, no searches, ... As users often have no need to sort columns, it would be nice if the initialization of DataTables would be postponed until the first time the user actually clicks on a column header and requests a sort. This would of course make this 'first' sort a lot slower, but that is something that users can comprehend as they know something is going on based on a request they made. The initialization DataTables does on startup by default just seems like a performance issue to them.
Is there a switch to indicate that the original table is already striped?
I can set the 'even' and 'odd' classes (or whatever stripe classes you want) while generating the table. There is no need for DataTables to go over all rows and call the jquery addClass and removeClass functions. According to my profiling, this costs a lot of time.
↧
Datatables within asp:TabContainer where asp:TabPanels are dynamically generated in code behind
My asp:TabPanels are generated from code behind and the templates are exposed as user controls. Each tab has the same layout, a ListView with a table of data. To get the table to render the thead and tbody tags, I removed the runat server tag from the <table> tag. However, each tabs table is no longer uniquely named because of this and I can thus only get the first one to operate with datatables. Does this scenario sound feasible? I will attempt to get this up to be able to post a link to.
Here is a link: http://www.aquajunky.net/FixingHeadersAndColumns/
Here is a link: http://www.aquajunky.net/FixingHeadersAndColumns/
↧
Plug-in fails for large amount of data (84000 ) input fields
Hi,
My HTML layout consists of 60 header <th> cols , 1400 <td> rows.
For this large data, plug-in fails. No error is thrown. IE browser says it encountered a problem and gets closed.
I read about the datatables usage: 4 different ways of passing data to the datatable plug-in (Refer: http://datatables.net/usage/)
I believe mine is DOM approach and it failed because of huge data.
Do you think i can try for other 3 approaches:
JavaScript array
Ajax source
Server-side processing
Considering my complicated html structure, kindly suggest me a best approach. Also provide me a link to implement the same.
Thanks,
Veena
My HTML layout consists of 60 header <th> cols , 1400 <td> rows.
For this large data, plug-in fails. No error is thrown. IE browser says it encountered a problem and gets closed.
I read about the datatables usage: 4 different ways of passing data to the datatable plug-in (Refer: http://datatables.net/usage/)
I believe mine is DOM approach and it failed because of huge data.
Do you think i can try for other 3 approaches:
JavaScript array
Ajax source
Server-side processing
Considering my complicated html structure, kindly suggest me a best approach. Also provide me a link to implement the same.
Thanks,
Veena
↧