I'm using server-side processing code to retrieve all data. So far it's working fine. Now, I am checking the database every minute whether new record is been inserted or not. I am calling dataTables function if new record is been inserted in database. At the time its clearing entire records and displaying the records with newly inserted records. Can we do without clearing the existing data? or can we append the newly inserted record into existing record without clearing the record?
↧
Without clearing the entire records on Ajax call
↧
dont sort first row
Hi, i have a datatable where the first row is the insert-row (css-class=InsertRow)
I want to ignore that row when sorting the table so that the insert-row is always the first row.
edit:
following code seems to work despite the fact, that the first row moves either way...
when i debug the code the array gets constructed just like i want it to (insertrow is first entry) but the row is shown somewhere else either way.
What am i doing wrong here?
Best regards,
r3try
I want to ignore that row when sorting the table so that the insert-row is always the first row.
edit:
following code seems to work despite the fact, that the first row moves either way...
when i debug the code the array gets constructed just like i want it to (insertrow is first entry) but the row is shown somewhere else either way.
jQuery.fn.dataTableExt.afnSortData['dom-text'] = function (oSettings, iColumn) {
var aData = [];
jQuery('td:eq(' + iColumn + ') input[type=text]:first', oSettings.oApi._fnGetTrNodes(oSettings)).each(function () {
var col = jQuery(this).closest('tr');
if (col.hasClass('InsertRow')) {
aData.unshift("-1");//insert at front
} else {
aData.push(this.value);//append to back
}
});
return aData;
}
What am i doing wrong here?
Best regards,
r3try
↧
↧
editor & ruby on rails datasource
I'm new to rails and datatables and trying to understand how to connect the data to the editor.
I'm guessing the line i need to update is: "ajaxUrl": "php/browsers.php" but cant seem to find any documentation on how to do this with rails.
Can anyone point me in the right direction. Thanks!
I'm guessing the line i need to update is: "ajaxUrl": "php/browsers.php" but cant seem to find any documentation on how to do this with rails.
Can anyone point me in the right direction. Thanks!
↧
renaming problem
When i change the name of the file in the save as pop up window, the extension does not remain same(it should be). I am setting the sFileName parameter. any help?
↧
bJQueryUI: true not working in my code
Hi,
This is my day one with jQuery. I am using Data Table to display data in my HTML table.
I am using the following config options.
http://www.codeproject.com/Articles/194916/Enhancing-HTML-tables-using-a-JQuery-DataTables-pl#Introduction
I learn that ThemeRoller is used to accomplish this (http://datatables.net/usage/features). Should I download and include ThemeRoller related files in project or does dataTable plugin internally contains ThemeRoller's code and style.
This is my day one with jQuery. I am using Data Table to display data in my HTML table.
I am using the following config options.
$("#myTable_id").dataTable({
bJQueryUI: true,
sPaginationType: "full_numbers"
});
I am able to see the paging details, but I am unable to see the proper UI like in the third screenshot in the link below (though I have used bJQueryUI: true). http://www.codeproject.com/Articles/194916/Enhancing-HTML-tables-using-a-JQuery-DataTables-pl#Introduction
I learn that ThemeRoller is used to accomplish this (http://datatables.net/usage/features). Should I download and include ThemeRoller related files in project or does dataTable plugin internally contains ThemeRoller's code and style.
↧
↧
Change rowcallback after initialisation
I need to get my hands on existing datatable's fnRowCallback setting but everything I try seems to fail.
What have I tried:
and
No luck, but if I change
I get an error so that one seems to work. Also if I do fnRowCallback in the original datatable initialisation it works, but that's not what I want.
What have I tried:
var dt = $('#table').dataTable({
"bRetrieve": true,
"fnRowCallback" : function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
console.warn("working");
}
);
and
var dt = $('#table').dataTable({"bRetrieve": true});
dt.fnSettings().fnRowCallback = function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
console.warn("working");
}
No luck, but if I change
var dt = $('#table').dataTable({"bRetrieve": true});
dt.fnSettings().sAjaxSource = "invalid url";
I get an error so that one seems to work. Also if I do fnRowCallback in the original datatable initialisation it works, but that's not what I want.
↧
Datatables 1.9 - <td> content vanishing in IE
Using Datatables with Filter for our application which displays search result when a customer is searched from a large database [> 6 million rows].
IE issue :
When searched with email address the search result is displayed - in the datatable.
[In this case the search result has Only One Row always]
However when searched with other 3 parameters, the result is displayed for about 2 seconds when the page is on load, then Vanishes once the page is loaded.
[Eg. hundreds of result rows]
'No data available in table' is displayed
Tried the following:
.dataTables_wrapper td
{
overflow: hidden;
z-index: -1;
}
Still the problem persists.
Is this a bug triggered in IE by dataTables or this has something to do with styling for IE?
Any ideas please ? And this is very Urgent :[
IE issue :
When searched with email address the search result is displayed - in the datatable.
[In this case the search result has Only One Row always]
However when searched with other 3 parameters, the result is displayed for about 2 seconds when the page is on load, then Vanishes once the page is loaded.
[Eg. hundreds of result rows]
'No data available in table' is displayed
Tried the following:
.dataTables_wrapper td
{
overflow: hidden;
z-index: -1;
}
Still the problem persists.
Is this a bug triggered in IE by dataTables or this has something to do with styling for IE?
Any ideas please ? And this is very Urgent :[
↧
Update form fnRemder to mRender
Hello,
I see the fnRender code is depreciated! It will be replaced by mRender. How to change the code so it will work wit mRender?
How to update the following code to mRender?
Greetings Michel
I see the fnRender code is depreciated! It will be replaced by mRender. How to change the code so it will work wit mRender?
How to update the following code to mRender?
"fnRender": function ( o, val ) {
return o.aData[4];
}
Greetings Michel
↧
Column width on Internet Explorer
I'm having trouble fixing the column widths on internet explorer
https://gist.github.com/4318524
it works perfectly on Chrome, it generates a datatable with horizontal scrolling and with each column width fixed
but in Internet Explorer it generates a datatable without scrolling, with width 100% and it mess the column widths
https://gist.github.com/4318524
it works perfectly on Chrome, it generates a datatable with horizontal scrolling and with each column width fixed
but in Internet Explorer it generates a datatable without scrolling, with width 100% and it mess the column widths
↧
↧
Adding more data to dataTables without refreshing whole table (ServerSide table).
Hi, I need to add some more rows below the one that user choose. Data in aaData is fetched for the selection (lets say 2 rows came back), how to insert them but without refreshing whole table?
I can use fnAddData, cuz it needs fnDraw to render table data anyway. I cant either add manually some data to aoData, cuz in order to render proper TR markup, fnDraw has to be called.
Is there a way to manually render few rows (like some use of _fnCreateTr) in a chosen destination (tr position)?
I can use fnAddData, cuz it needs fnDraw to render table data anyway. I cant either add manually some data to aoData, cuz in order to render proper TR markup, fnDraw has to be called.
Is there a way to manually render few rows (like some use of _fnCreateTr) in a chosen destination (tr position)?
↧
Cell background color in fnAddData()
Hi everybody,
First of all, I know there are a lot of discussions in this matter, but I can't find any specific answer to my question :(
I need to add specific colors to specific cells that don't need any kind of previous validation, and it would be a lot easier if I could set the colors while adding the data directly in the fnAddData() method.
Is it possible?
Pleeeeasssee i hope so!
Thanks
First of all, I know there are a lot of discussions in this matter, but I can't find any specific answer to my question :(
I need to add specific colors to specific cells that don't need any kind of previous validation, and it would be a lot easier if I could set the colors while adding the data directly in the fnAddData() method.
Is it possible?
Pleeeeasssee i hope so!
Thanks
↧
how to force the datatable stay on the same page ?
Hello,
First, I would like to thank you guys for the wonderful datatable column filter plugin. I was able to apply the plugin on an ASP.NET Gridview control. I have sorting, filtering, paging features on the datatable and the datatable itself is working as expected. Now, I have added one more column to the datatable which has checkboxes for each row and a checkbox in the header for that row. And I had added a few javascript code such that when the header checkbox is clicked, all the checkboxes in all the rows on that page of the gridview (datatable) would get checked, which is also working with exception of one issue that I am running into.
When the datatable displays the data, when I click on Page 2 and check the checkbox in the header, its checking all the checkboxes in all the rows on Page 2 but its bringing back the users to Page 1. I mean its checking the items in Page 2 but displays Page 1. I tried to use fnStandingRedraw() function but didnt have any success yet.
Below mentioned is the code:
$(document).ready(function() {
function fixGridView(tableEl) {
var jTbl = $(tableEl);
if (jTbl.find("tbody>tr>th").length > 0) {
jTbl.find("tbody").before("<thead><tr></tr><tr></tr></thead>");
jTbl.find("thead tr").append(jTbl.find("th"));
jTbl.find("tbody tr:first").remove();
}
}
fixGridView($("#gv_Prov_To_Add"));
//$("#gv_Prov_To_Add").GridviewFix({ header: "headerStyle", row: "rowStyle", footer: "footerStyle" }).dataTable().columnFilter();
$("#gv_Prov_To_Add").GridviewFix({ header: "headerStyle", row: "rowStyle", footer: "footerStyle" }).dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bAutoWidth": false,
"bStateSave": true
}).columnFilter({
aoColumns: [null,
{ type: "text" },
{ type: "text" },
{ type: "text" },
{ type: "text" },
{ type: "text" },
{ type: "text" },
{ type: "text" },
{ type: "text" },
{ type: "text" },
{ type: "text" },
{ type: "text" },
// { type: "text" },
{type: "text" },
{ type: "text" },
{ type: "text" }
]
});
$.fn.dataTableExt.oApi.fnStandingRedraw = function(oSettings) {
if (oSettings.oFeatures.bServerSide === false) {
var before = oSettings._iDisplayStart;
oSettings.oApi._fnReDraw(oSettings);
// iDisplayStart has been reset to zero - so lets change it back
oSettings._iDisplayStart = before;
oSettings.oApi._fnCalculateEnd(oSettings);
}
// draw the 'current' page
oSettings.oApi._fnDraw(oSettings);
};
});
These are the js functions:
function HeaderClick(CheckBox)
{
var oTable = $("#gv_Prov_To_Add").dataTable();
oTable.fnStandingRedraw();
//Get target base & child control.
var TargetBaseControl = document.getElementById('<%= this.gv_Prov_To_Add.ClientID %>');
var TargetChildControl = "ChkBox_Prov_To_Add";
//Get all the control of the type INPUT in the base control.
var Inputs = TargetBaseControl.getElementsByTagName("input");
//Checked/Unchecked all the checkBoxes in side the GridView.
for(var n = 0; n < Inputs.length; ++n)
if(Inputs[n].type == 'checkbox' && Inputs[n].id.indexOf(TargetChildControl,0) >= 0)
Inputs[n].checked = CheckBox.checked;
//Reset Counter
Counter = CheckBox.checked ? TotalChkBx : 0;
}
function ChildClick(CheckBox, HCheckBox)
{
//get target base & child control.
var HeaderCheckBox = document.getElementById(HCheckBox);
//Modifiy Counter;
if(CheckBox.checked && Counter < TotalChkBx)
Counter++;
else if(Counter > 0)
Counter--;
//Change state of the header CheckBox.
if(Counter < TotalChkBx)
HeaderCheckBox.checked = false;
else if(Counter == TotalChkBx)
HeaderCheckBox.checked = true;
}
And its a ASP.NET GridView with a template field as mentioned below:
<asp:TemplateField HeaderStyle-BackColor="#edf6fc" HeaderStyle-Width="30px" ItemStyle-Width="30px" ControlStyle-Width="30px">
<ItemTemplate>
<input ID="ChkBox_Prov_To_Add" runat="server" style="border: solid 0px Black;
height: 8px;" type="checkbox" />
</ItemTemplate>
<HeaderTemplate>
<asp:CheckBox ID="chkBxHeader" onclick="javascript:HeaderClick(this);" runat="server" />
</HeaderTemplate>
</asp:TemplateField>
When I place few breakpoints in the code, I see that the ._fnDraw() being called fnStandingReDraw() function is drawing the datatable and the setting the standing page as page 2 but after the fnDraw() is completed.....somehow fnSort() is being executed. I mean fnSort() is being called from somewhere and its overwriting the IDisplayStart to 0. not sure why fnSort() is getting executed at the end.
Can someonw help me on this ?
First, I would like to thank you guys for the wonderful datatable column filter plugin. I was able to apply the plugin on an ASP.NET Gridview control. I have sorting, filtering, paging features on the datatable and the datatable itself is working as expected. Now, I have added one more column to the datatable which has checkboxes for each row and a checkbox in the header for that row. And I had added a few javascript code such that when the header checkbox is clicked, all the checkboxes in all the rows on that page of the gridview (datatable) would get checked, which is also working with exception of one issue that I am running into.
When the datatable displays the data, when I click on Page 2 and check the checkbox in the header, its checking all the checkboxes in all the rows on Page 2 but its bringing back the users to Page 1. I mean its checking the items in Page 2 but displays Page 1. I tried to use fnStandingRedraw() function but didnt have any success yet.
Below mentioned is the code:
$(document).ready(function() {
function fixGridView(tableEl) {
var jTbl = $(tableEl);
if (jTbl.find("tbody>tr>th").length > 0) {
jTbl.find("tbody").before("<thead><tr></tr><tr></tr></thead>");
jTbl.find("thead tr").append(jTbl.find("th"));
jTbl.find("tbody tr:first").remove();
}
}
fixGridView($("#gv_Prov_To_Add"));
//$("#gv_Prov_To_Add").GridviewFix({ header: "headerStyle", row: "rowStyle", footer: "footerStyle" }).dataTable().columnFilter();
$("#gv_Prov_To_Add").GridviewFix({ header: "headerStyle", row: "rowStyle", footer: "footerStyle" }).dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bAutoWidth": false,
"bStateSave": true
}).columnFilter({
aoColumns: [null,
{ type: "text" },
{ type: "text" },
{ type: "text" },
{ type: "text" },
{ type: "text" },
{ type: "text" },
{ type: "text" },
{ type: "text" },
{ type: "text" },
{ type: "text" },
{ type: "text" },
// { type: "text" },
{type: "text" },
{ type: "text" },
{ type: "text" }
]
});
$.fn.dataTableExt.oApi.fnStandingRedraw = function(oSettings) {
if (oSettings.oFeatures.bServerSide === false) {
var before = oSettings._iDisplayStart;
oSettings.oApi._fnReDraw(oSettings);
// iDisplayStart has been reset to zero - so lets change it back
oSettings._iDisplayStart = before;
oSettings.oApi._fnCalculateEnd(oSettings);
}
// draw the 'current' page
oSettings.oApi._fnDraw(oSettings);
};
});
These are the js functions:
function HeaderClick(CheckBox)
{
var oTable = $("#gv_Prov_To_Add").dataTable();
oTable.fnStandingRedraw();
//Get target base & child control.
var TargetBaseControl = document.getElementById('<%= this.gv_Prov_To_Add.ClientID %>');
var TargetChildControl = "ChkBox_Prov_To_Add";
//Get all the control of the type INPUT in the base control.
var Inputs = TargetBaseControl.getElementsByTagName("input");
//Checked/Unchecked all the checkBoxes in side the GridView.
for(var n = 0; n < Inputs.length; ++n)
if(Inputs[n].type == 'checkbox' && Inputs[n].id.indexOf(TargetChildControl,0) >= 0)
Inputs[n].checked = CheckBox.checked;
//Reset Counter
Counter = CheckBox.checked ? TotalChkBx : 0;
}
function ChildClick(CheckBox, HCheckBox)
{
//get target base & child control.
var HeaderCheckBox = document.getElementById(HCheckBox);
//Modifiy Counter;
if(CheckBox.checked && Counter < TotalChkBx)
Counter++;
else if(Counter > 0)
Counter--;
//Change state of the header CheckBox.
if(Counter < TotalChkBx)
HeaderCheckBox.checked = false;
else if(Counter == TotalChkBx)
HeaderCheckBox.checked = true;
}
And its a ASP.NET GridView with a template field as mentioned below:
<asp:TemplateField HeaderStyle-BackColor="#edf6fc" HeaderStyle-Width="30px" ItemStyle-Width="30px" ControlStyle-Width="30px">
<ItemTemplate>
<input ID="ChkBox_Prov_To_Add" runat="server" style="border: solid 0px Black;
height: 8px;" type="checkbox" />
</ItemTemplate>
<HeaderTemplate>
<asp:CheckBox ID="chkBxHeader" onclick="javascript:HeaderClick(this);" runat="server" />
</HeaderTemplate>
</asp:TemplateField>
When I place few breakpoints in the code, I see that the ._fnDraw() being called fnStandingReDraw() function is drawing the datatable and the setting the standing page as page 2 but after the fnDraw() is completed.....somehow fnSort() is being executed. I mean fnSort() is being called from somewhere and its overwriting the IDisplayStart to 0. not sure why fnSort() is getting executed at the end.
Can someonw help me on this ?
↧
Refresh data from DB
Hello,
I need to refresh my table from database table but the code:
doesn´t refresh the table. I don´t wanna press F5 please...
Any idea?
Thank you!
I need to refresh my table from database table but the code:
oTable.fnDraw();
doesn´t refresh the table. I don´t wanna press F5 please...
Any idea?
Thank you!
↧
↧
ColVis: checkbox's out of the button?
I have quite a bit of columns and while DataTables is an excellent, having all the show/hide columns in the button drop down is quite loooong.
How can I take all the "checkbox" options out of the the "Show / hide columns" button? ...so that they are all visible straight on the page?
Thanks,
--Robert
How can I take all the "checkbox" options out of the the "Show / hide columns" button? ...so that they are all visible straight on the page?
Thanks,
--Robert
↧
Checkbox column in DataTables
I am loading my datatable through sAjaxSource, and I'm specifying my columns individually with aoColumns. In the JSON returned from the server, I'm passing in a boolean value represented by a 1 or a 0. This is arbitrary - I could represent it any way I like. Can someone explain to me how I can display a checkbox in my datatable? I am also using the Editor, and need to be able to update the value within the Editor edit dialog. I don't need to create new rows though. I've been through the docs and am still not sure? Anyone? Thanks in advance!
↧
sScrollY creates double <thead> and cols are misaligned
I use this code to generate my table
looking at the source code I've noticed that there are two divs, one is "dataTables_scrollHeadInner" and it contains a table which contains my original <thead> and <th>s, the other is dataTables_scrollBody and it contains a table with an empty <thead> with right size <th>s and a <tbody> with all my data.
I'm using the last version of dataTables (1.9.4).
Here a snapshot http://www.makerfaire.it/etc/datatables_error.png
Any hint?
thank you in advance
$('#myTable').dataTable( {
"bPaginate": false,
"bLengthChange": false,
"bFilter": false,
"bSort": false,
"bInfo": false,
"bAutoWidth": false,
"bDestroy": true,
"sDom": 'T<"clear">t',
"sScrollY": "500",
"oTableTools": {
"sSwfPath": base_url+"js/swf/copy_csv_xls_pdf.swf"
}
} );
The problem is that the generated <th>s are of different sizes respect to the corresponding <td>slooking at the source code I've noticed that there are two divs, one is "dataTables_scrollHeadInner" and it contains a table which contains my original <thead> and <th>s, the other is dataTables_scrollBody and it contains a table with an empty <thead> with right size <th>s and a <tbody> with all my data.
I'm using the last version of dataTables (1.9.4).
Here a snapshot http://www.makerfaire.it/etc/datatables_error.png
Any hint?
thank you in advance
↧
how to center table on page
How can i center my table on the page. Looked through the CSS and html and couldnt find where to change or add.
Thanks,
Coach
http://www.newjerseysepticservice.com/table/gmjr-full.html
Thanks,
Coach
http://www.newjerseysepticservice.com/table/gmjr-full.html
↧
↧
Editable add-in is not compatible with ColVis plugin
Allan,
Column editable is not working when i use colvis to hide the column. Same issue i faced for column filter with colvis. But i fixed that issue by adding" bUseColVis: true" in column filter. Is there any solution to solve this issue??? I want to integrate editable column, colvis and column filter widget.
Column editable is not working when i use colvis to hide the column. Same issue i faced for column filter with colvis. But i fixed that issue by adding" bUseColVis: true" in column filter. Is there any solution to solve this issue??? I want to integrate editable column, colvis and column filter widget.
↧
Custom filter
Hello,
Suppose i have two rows in my table
Name | city | nickname
David - New York - Dave
Jody - Yorkshire - Jody13
When a users types "David York" it filters and just shows me 1 row.
I would like the search to filter on any match:
So that it finds David & Jody because Jody should also match the search since she lives in YORKshire.
In other words: How can i change the default Datatable behaviour to search on any words entered in the search filter field.
Thx for help!
Suppose i have two rows in my table
Name | city | nickname
David - New York - Dave
Jody - Yorkshire - Jody13
When a users types "David York" it filters and just shows me 1 row.
I would like the search to filter on any match:
So that it finds David & Jody because Jody should also match the search since she lives in YORKshire.
In other words: How can i change the default Datatable behaviour to search on any words entered in the search filter field.
Thx for help!
↧
Column mis-alignment with auto table layout and horizontal scrollbar
I was trying to use datatable in my application and run into this issue. My table has around 25 columns and has automatic layout (not fixed).
Problem is when sort any column, table get re-align. Same can be seen on following url - http://jsfiddle.net/tjain/2myVm/embedded/result/
Problem is there when i am using horizontal scrollbar.
Problem is when sort any column, table get re-align. Same can be seen on following url - http://jsfiddle.net/tjain/2myVm/embedded/result/
Problem is there when i am using horizontal scrollbar.
↧