Hi, in column hide show i cant set width so in that case some words would not proper displayed. Please tell me how to extend width of colvis.
"oColVis":
{
"activate": "mouseover",
"buttonText": "Columns Visibility",
"aiExclude": [0, 1, 2, 3, 4, 5, 6, 7]
},
↧
how to extend colvis width
↧
Datatables throwing error and showing nulls.
DataTables Debugger code: upolak (http://debug.datatables.net/upolak)
Table Name: myTable
Error: DataTables warning (table id = 'mytable'): Requested unknown parameter 'transDate' from the data source for row 0
Problem:
It throws the error above and shows nulls for all the values inside the table.
Would really appreciate if someone could help me.
Thanks!
↧
↧
Horizontal Scrolling messes up the table header alignments
I am running into a strange problem when I upgraded my Rails application to use Bootstrap 2 instead of Web App Theme with the horizontally scrolled datatables. The horizontal scrolling worked perfectly on my datatables with a large number of columns when using Web App Theme. However, when I upgraded to Bootstrap 2, the table headers are out of alignment with the table body.<br />
<br />
It seems like the horizontal scrolling is not enabled at all for the header elements whereas the table body columns can be scrolled left and right correctly. For instance, when I set white-space to nowrap for both td and th as shown below:<br />
<br />
td, th {<br />
white-space: nowrap;<br />
}<br />
<br />
I see the table header stretched outside the boundaries of the datatable since it is not wrapping the white spaces in the header anymore, The header elements should scroll within the boundaries of the datatable but not wrap.<br />
<br />
Has anyone run into this problem with Bootstrap 2 and datatables?
↧
How to create a link in one column data item that leads to dounload link put in other column's data
Hello;
I'm novice user;
I need to make one column data to hold a a download link stored in another column's data
My table holds list of docs {Title, File path(hidden),Author, Date, File Type}
I need to assign a link to the {file type} data item that points to the {file path} stored in the hidden column; any help please !
↧
fnDeleteRow with jQuery
Into the last cell on a table with datatables i use icons for some actions. One of them are a delete-icon, with this the data into this row will delete with ajax. Now i'd like to delete the row also from datatable and i try it to do so:<br />
<code class='multiline brush: js;'>var row = $(this).closest('tr');
$('.dataTable').dataTable().fnDeleteRow(row);</code>
<br />
But this will delete the wrong row into the table. The datatable object will create in another function and i don't have it globally. <br />
How can i delete the correct row?<br />
<br />
Thanks,<br />
Stefan
↧
↧
Effects & Updating Removing Cells
I've used DT a few times and it's generally reliable, but 1.9.4 has been driving me a little crazy. I'm using the Bootstrap theme (BT 2.2.2 unfortunately, can't upgrade), and attempting to put together a "live" CRUD table by dynamically setting the "contenteditable" property on the TD elements and updating via AJAX.
Hovering events (for styling) are fine. Setting to/unsetting contenteditable is fine. Adding and deleting rows is fine. Even updating the Ajax is cool.
However, i get some very strange errors when updating cells.
jQuery('#my_table').on( "click", "td", function(e) {
console.log(jQuery('#my_table').dataTable().fnGetPosition( this ));
jQuery(this).toggle( "highlight" );
});
Position is reported OK. BUT when you add the jQuery UI effect--
Click the cell, and removes it from the table. Deletes that column of that row.
Here's what happens when you click normally, without the effect:
jQuery('#my_table').on( "click", ".editable", function(e) {
if( !jQuery(this).hasClass('header-sort') ) {
e.preventDefault();
jQuery(this).attr('contentEditable', true); // make the td editable
jQuery(this).addClass('editing-focus'); // add some UI highlighting
jQuery(this).focus(); // focus on it so we get an event
jQuery(this).caret(-1); // put the caret at the end of the content
}
});
Which works fine. Even if it's annoying having to manually remove the "editable" class from the header rows once it's been set with "sClass" on init. The TD text can be changed, it turns a nice shade of orange, and is edit-friendly.
Once the edit has finished, the Ajax update happens onBlur().
jQuery('#my_table').on( "blur", ".editable", function(e) {
window.selected_td = jQuery(this); // store the DOM element for Ajax
jQuery(this).attr('contentEditable', false); // make it non-editable
jQuery(this).removeClass('editing-focus'); // put it back to normal
var new_field_value = jQuery.trim(jQuery(this).html()); // get the text entered, check if it's different
var position = jQuery('#my_table').dataTable().fnGetPosition( window.selected_td[0] ); // find out where we are
var row_index = position[0];
var visible_col_index = position[1];
var all_col_index = position[2];
jQuery('#credits_history').dataTable().fnUpdate( new_field_value, row_index, all_col_index ); // set the TD content just in case
// DO SOME AJAX STUFF (Async)
success: function(data) {
var nearest_tr = window.selected_td.parent('tr'); // stored this globally earlier, all fine
var position = jQuery('#my_table').dataTable().fnGetPosition( selected_td[0] );
var row_index = position[0];
var visible_col_index = position[1];
var all_col_index = position[1];
var current_row_content = jQuery('#my_table').dataTable().fnGetData(nearest_tr[0]); // fine
var current_cell_content = jQuery('#my_table').dataTable().fnGetData(selected_td[0]); // fine
// if we're changing column 3, update cols 1 and 2 in parallel
jQuery('#my_table').dataTable().fnUpdate( AJAXVAL, row_index, all_col_index ); // update current col
jQuery('#my_table').dataTable().fnUpdate( AJAXVAL, row_index, 0 ); // Update first col, refresh
jQuery('#my_table').dataTable().fnUpdate( AJAXVAL, row_index, 1 ); // Update second col, refresh
}
});
The result of the update is that it - deletes the current cell. The idea is that column 3 is clicked, and the values from it are used in column 1 and column 2. When column 3 is clicked, it removes column 3. Columns 4-9 are then pulled back as the row is redrawn (the row is missing a column), as if it's completely missing. It's still in the DOM.
I am losing my hair.
↧
Editable DataTable works fine with Chrome & Safari, but not in Firefox
Hi,
I am using 1.9.1 with DataTables Data Manager (CRUD) Add-on, It works fine in Chrome & Safari but not in Firefox, where after updating a row, a White Space is shown.
Here you can the example.
http://condorapp.nullpointer.cloudbees.net/floor-test
Thanks !
↧
Help with the error
Older project that I am reviving. I get the error: DataTables warning: table id=dtable - Requested unkown parameter '16' for row 0. For more information about this error, please see http://datatables.net/tn/4.
in javascript console I get:
Uncaught TypeError: Cannot read property 'className' of undefined
My init code:
Where else is it getting the number of columns from ?
Thanks,
Kevin
↧
How to to export hidden columns to PDF file?
It works fine with xls file using "sExtends": "xls", "mColumns": [0, 1, 2, 3, 4, 5, 6, 7, 8, 10] (where [10] is hidden) in PDF column [10] is overwritten and messed up. PDF displays properly only visible columns Here is snippet where I setup column [10] is not visible "aoColumnDefs": [ { "bVisible": false, "aTargets": [10] } ]
Thank you in advance.
↧
↧
Sortable Col Headers: kb activation sometimes doesn't work
Has anyone run into problem where you can tab through sortable column headers but ENTER key sometimes does not cause the re-sort on the currently focused column?
↧
1.9 Pagination - TR custom class/attributes disappear after 1st page
I'm applying a custom class to the TR elements in a data table with the pagination option turned on and I'm finding the class I applied is only showing up on the 1st page. So I tried a custom attribute and same thing - only on the first page. On initial apply I verified that .dataTable().fnAddData({...}) is getting called for all rows in the table and on the call is setting the element correctly.
It seems that the only class applied on the last page is the odd/even class:
First page:
<tr class="odd unread" data-ru="unread">
Last page:
<tr class="odd">
The custom class/attribute on the 1st page persist if I switch to the last page and back so it isn't something happening on the page event.
Options:
var dtOptions = {
"sDom": '<"top"f>rt<"modal-footer"lip><"clear">',
"aoColumnDefs": [{
"bSortable": false,
"aTargets": [0]
}],
"bAutoWidth": false,
};
↧
Integrate Bootstrap Multiselect in data table 1.9.4
Hi , i want to show multiselect dropdown in datatable .but failed to apply bootstrap css on data table.. i just create a dropdown from server side and send response in json format.Multi select format eg:
<select id="test-build-select-all-select" class="multiselect chzn-drop-up" multiple="multiple"> <option value="select"> Select all</option> <option selected="selected" value="10">10</option> <option selected="selected" value="15">15</option> <option selected="selected" value="20">20</option> <option value="25">25</option> </select> Appreciate your feedback...
↧
set column width
Hi there,
I use dataTable version 1.9.4. It is a powerful product. However, lots of features, styles and functions are difficult to implement. I have been struggling for a while to set column to fixed width without success. Below is the code: The first column is a radio that I want to have minimum width. I tried to use "sWidth" with both "px" and "%" and different combinations. None worked.
Thanks for your help!
@section scripts{
<link href="~/Content/DataTables-1.9.4/media/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function () {
oTable = $('#requestDataTable').dataTable({
"sDom": '<"toolbar">frtip',
"bFilter": false,
"iDisplayLength": 20,
"bAutoWidth": false,
"aoColumns" : [
{ sWidth: "10%" },
{ sWidth: "30%" },
{ sWidth: "30%" },
{ sWidth: "30%" }
]
});
$('#requestDataTable tr').click(function () {
// get recordID
var itemid = $('[name="MyRadio"]:checked').prop('id');
if (itemid) alert(itemid);
else alert('please select a row');
});
});
</script>
}
<html>
<body>
<h2>Requests</h2>
<p>
@Html.ActionLink("Create New", "Create")
</p>
<div id="container">
<div id="demo">
<table id="requestDataTable" border="0" cellpadding="0" cellspacing="0" class="display" style="white-space:nowrap" >
<thead>
<tr>
<th></th>
<th>Request</th>
<th>Requestor</th>
<th>Proteins</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>
<input type="radio" name="MyRadio" id="@item.RequestID"/>
</td>
<td>@item.RequestName</td>
<td>@item.Requestor</td>
<td>@item.ProteinNames</td>
</tr>
}
</tbody>
</table>
</div>
</div>
</body> </html>
↧
↧
TypeError: oSettings.aoColumns[iColumn] is undefined
Hello =)
I have a problem with the datatable. I don't have a clue why this error appears. I had a look at possible causes to this problem, but didn't find a match with mine. As far as I know the tablebody and -header have exactly the same amount of entries and there's no problem with the sorting. This error appears every time I load the table for the first time after login, and sometimes it disappears after the first or fifth refresh. Then it don't occurs again, until i logout and login again. It's kinda annoying, because I don't have a solution for this. Perhaps you can help me with this issue =) that would be great. BTW I'm using Datatable 1.9.4 and whenever this error occurs no data is loaded for the table. After several refreshs it's working like a charm. Kind Regards Miriam
↧
Problems deleting rows and the table's style (fnClearTable function)
I want to search in my database and show the results in a datatable. But i have some problems. After the first search, I have to delete the previous rows to show the new results. To remove all rows I am using fnClearTable() but
- it changes the style of the table.
- the footer of the table always shows the quantity is 0 when it is not. It lists the expected result.
- because the "quantity is 0", the previous and next buttons are disabled, it is not possible to sort by columns neither use the search filter.
- the internalization does not work.
If I comment the line $('#displayData').dataTable().fnClearTable(); all these problems disappear but the new rows of the search are added to the current table's data source.
There are my html / javascript codes respectively:
Thanks in advance!
- it changes the style of the table.
- the footer of the table always shows the quantity is 0 when it is not. It lists the expected result.
- because the "quantity is 0", the previous and next buttons are disabled, it is not possible to sort by columns neither use the search filter.
- the internalization does not work.
If I comment the line $('#displayData').dataTable().fnClearTable(); all these problems disappear but the new rows of the search are added to the current table's data source.
There are my html / javascript codes respectively:
$.ajax({ // search button click
url: '../xxx/search.php',
type: 'POST',
data: 'idxxx=1',
dataType: 'json',
success: function(response) {
var thtml = "";
$('#displayData').dataTable().fnClearTable();
if(response.length > 0) {
$.each(response, function(index, record) {
thtml += "<tr>";
thtml += "<td>" + record.Name + "</td>" ;
thtml += "<td>" + record.BDay + "</td>";
thtml += "<td>" + record.Code + "</td>";
thtml += "</tr>";
});
}
$('#displayData tbody').append(thtml);
$('#resultContainer').css({"visibility":"visible"});
$('#displayData').dataTable({
"bRetrieve": true,
"oLanguage": {
"sUrl": "../xxx/DataTables-1.9.4/pt.txt"
},
"sPaginationType" : "full_numbers"
});
}
});
<table class="display" id="displayData">
<thead>
<tr>
<th>Name</th>
<th>Birthday</th>
<th>Code</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Thanks in advance!
↧
Header Row not applying proper widths
http://debug.datatables.net/okunes
Above is the link to the debug information.
The column width specifications are not being applied to the Header Row.
The strange part is that I am using the same "logic" in other pages and parts of this application and it is working fine.
Here is my rendered table:
Above is the link to the debug information.
The column width specifications are not being applied to the Header Row.
The strange part is that I am using the same "logic" in other pages and parts of this application and it is working fine.
Here is my rendered table:
<table id="associatedAccountsTable" style="width: 100%">
<thead>
<tr><th style="width: 400px">Name</th><th style="width: 100px">National Account</th><th style="width: 240px">Address</th><th style="width: 240px">City</th><th style="width: 50px">State</th><th style="width: 100px">Zip Code</th></tr>
</thead>
<tbody>
<tr><td style="width: 400px">
BOSE CORPORATION
</td><td style="width: 100px">
N8806203
</td><td style="width: 240px">
THE MOUNTAIN
</td><td style="width: 240px">
FRAMINGHAM
</td><td style="width: 50px">
MA
</td><td style="width: 100px">
01701
</td></tr>
<tr><td style="width: 400px">
BOSE CORPORATION
</td><td style="width: 100px">
N8806202
</td><td style="width: 240px">
THE MOUNTAIN
</td><td style="width: 240px">
FRAMINGHAM
</td><td style="width: 50px">
MA
</td><td style="width: 100px">
01701
</td></tr>
<tr><td style="width: 400px">
BOSE CORPORATION
</td><td style="width: 100px">
N8806201
</td><td style="width: 240px">
THE MOUNTAIN
</td><td style="width: 240px">
FRAMINGHAM
</td><td style="width: 50px">
MA
</td><td style="width: 100px">
01701
</td></tr>
<tr><td style="width: 400px">
BOSE
</td><td style="width: 100px">
N8806202
</td><td style="width: 240px">
3601 SUNSET BLVD
</td><td style="width: 240px">
W COLUMBIA
</td><td style="width: 50px">
SC
</td><td style="width: 100px">
29169
</td></tr>
<tr><td style="width: 400px">
BOSE MANUFACTURING
</td><td style="width: 100px">
N8806202
</td><td style="width: 240px">
2000 CAROLINA PINES DRIVE
</td><td style="width: 240px">
BLYTHEWOOD
</td><td style="width: 50px">
SC
</td><td style="width: 100px">
29016
</td></tr>
<tr><td style="width: 400px">
BOSE CORPORATION
</td><td style="width: 100px">
N8806201
</td><td style="width: 240px">
% FRT PYMT PLAN MS #238
</td><td style="width: 240px">
FRAMINGHAM
</td><td style="width: 50px">
MA
</td><td style="width: 100px">
01701
</td></tr>
<tr><td style="width: 400px">
BOSE CORPORATION
</td><td style="width: 100px">
N8806201
</td><td style="width: 240px">
2000 CAROLINA PINES DRIVE
</td><td style="width: 240px">
BLYTHEWOOD
</td><td style="width: 50px">
SC
</td><td style="width: 100px">
29016
</td></tr>
<tr><td style="width: 400px">
DUBOSE STRAPPING INC
</td><td style="width: 100px">
00000000
</td><td style="width: 240px">
PO BOX 819
</td><td style="width: 240px">
CLINTON
</td><td style="width: 50px">
NC
</td><td style="width: 100px">
28328
</td></tr>
</tbody>
</table>
↧
Editable DataTable works fine with IE, Chrome & Safari, but not in Firefox
In Firefox, where after updating a row, a White Space is shown. I include the debuger code: http://debug.datatables.net/ekerav
↧
↧
Shrink of table on table data refresh
I did table refresh which refresh only data inspite of rendering the whole table by reapplying the properties of column every time i am reloading data. Regarding UI the width of the table shrinks 1px each time the refresh happens . i tried several solution .. But nothing got suceeded . Please help me on this.
↧
Speeding up datatables when retrieving data from indexedDB
I am using datatablejs on client side for displaying the database to client. I download the database from server initially using backbone indexeddb adapter and store it in indexedDB so as to support offline access to data. However, datatables take approx around 5 minutes to render 20,000 entries from indexedDB. This is my JS code:
http://jsfiddle.net/mPyH5/
I have tried using methods listed here: http://datatables.net/faqs#speed but none of them works. I have also tried using infinite scrolling. It doesn't reduce time. Can anybody suggest a way to make the list page load faster?
http://jsfiddle.net/mPyH5/
I have tried using methods listed here: http://datatables.net/faqs#speed but none of them works. I have also tried using infinite scrolling. It doesn't reduce time. Can anybody suggest a way to make the list page load faster?
↧
Configure Columns Width, Filter button disappears
Hi, I am trying to configure the width columns in database to avoid rows growing to much. I am using this configuration http://live.datatables.net/moyucek/1/. If i don´t use { "sWidth": "5%" }, or any other percentage, my Search/Filter is there and works fine. Link: http://imageshack.com/a/img839/414/r2dj.png If i use { "sWidth": "5%" }, Search/Filter option disappears of the page. Link: http://imageshack.com/a/img843/7056/mq26.png What am i doing wrong?
↧