We are trying to programatically use ColReorder on a table that has over 200 columns and 3000 rows. Tried using the following line:
$('#myTable').DataTable().colReorder.order( [array of 200 integers, random order] )
On chrome it works fine, however, on IE9 it freezes. We suspect it could not handle this many columns.
Anyone have any ideas how to fix?
http://thesgn.com/board/index.php?pages/Members/
I have a table here (up there) that lists all the members of the clan I'm in.
So I want to know if Editor can be used to directly add members to the table [on that page] and save them so that everyone can see the changes.
My next question is, can I hide the add, edit, delete buttons to only admins of the site? I realize this would involve some sort of integration between XenForo (software we use) and DataTables/editor. I would rather not have to do that, so can I only show the buttons to certain ip addresses?
Thanks!
Hi all,
I'm in the process of using the custom range filter but I've run into a snag..
In the plug-in example (https://datatables.net/examples/plug-ins/range_filtering.html), the new table is drawn upon keyup and the min/max are extracted values. My table is drawn upon clicking the #applyfilter button and my values are passed in through variables. The first time I apply the filter, I get the expected result. The problem occurs when I change the values of min and max and the range gets bigger (smaller isn't the issue) . When I redraw the table (increasing the range), there's no change. Here's what I have so far:
function DataTableSearch(min, max, $colnum) {
$.fn.dataTable.ext.search.push(
function (settings, data, dataIndex) {
var $fcolnum = parseFloat(data[$colnum].replace(/\s|-(\D)|[^-0-9]/g, "")) || 0;
if ((isNaN(min) && isNaN(max)) ||
(isNaN(min) && $fcolnum < max) ||
(min< $fcolnum && isNaN(max)) ||
(min< $fcolnum && $fcolnum < max)) {
return true;
}
return false;
}
)
}
Any ideas what the issue may be? Thanks in advance.
I am hoping to be able to find the table row that was edited and change the style class for the row to show that it has been edited. Is this possible through these events? So far, it looks like "this" in the event is just a reference to the editor. I know that I can see the data being edited, but I am after the actual table row (tr) element.
Great job... Thanks a lot for this plugin 1. Is there any way to export company logo in PDF 2. Can we modify/Changes the css of content in export PDF or excl
Thanks
In 1.10.6, the option ordering: false completely disables ordering: it disables click-to-order on column headers, but it also ignores the order and orderFixed options, as well as the order() functions.
I have this code:
// ...
ordering: false,
orderFixed: [[12,'asc'],[1, 'asc']],
paging: false,
info: false,
// ...
And the second line orderFixed is being ignored.
Is there a way to just disable the 'click-to-order' functionality, but still have the other functions work?
I am using row grouping feature of datatable, here is my drawcallback function:
oTable = jQuery_1_11('#example').dataTable({
"searching": false,
"processing": true,
"serverSide": true,
"iDisplayLength": 20,
"sPaginationType": "full_numbers",
"language": {"infoFiltered": ""},
columnDefs: [{
targets: 0,
"visible": false,
}],
"ajax": {
"url": "index.php?entryPoint=getTableData",
"dataType": 'json',
"pages": "5",
"type": "POST",
"data": function(d) {
d.dbJson = sendJson
},
"dataSrc": function(response) {
return response.aaData;
}
},
"drawCallback": function( ) {
var api = this.api();
var rows = api.rows({page: 'current'}).nodes();
var last = null;
api.column(0, {page: 'current'}).data().each(function(group, i) {
if (last !== group) {
jQuery_1_11(rows).eq(i).before(
'<tr class="group"><td colspan="5">' + group + '</td></tr>'
);
last = group;
}
});
}
})
I don't know it's stuck on.
api.column(0, {page: 'current'}).data().each(function(group, i) {
This is giving the error: Uncaught TypeError: Cannot read property 'each' of undefined
Please help!
I want to use ColReorder, ColVis, TableTools, and possibly KeyTable on the same table. Is there a way to do this or something I need to change to allow this to work? When I try only 1 will work. Thanks
Reading through the manual, it seems like I can use regexp with server side processing. http://datatables.net/manual/server-side
"Note that normally server-side processing scripts will not perform regular expression searching for performance reasons on large data sets, but it is technically possible and at the discretion of your script."
Is there an example of this. I have the following
var oTable = $('#testTable').dataTable( {
"processing": true,
"serverSide": true,
"dom": 'rtip',
"lengthMenu": [[50, -1], [50, "All"]],
"search": {
"value": true,
"regex": true
},
"ajax": "scripts/server_processing.php"
} );
I'm using the following code to search/filter
$('#testTable').DataTable().search('1120|2YR',true,false).draw();
When I search, I get no results. When I filter, nothing is getting filtered. Any help on this is much appreciated. Thanks
debugger code: etaqiw
Hello,
I have a form that when opened from the tabletools 'new' button fires some of our event listeners twice.
For example:
$('input', editor.node('part_master.part_number')).on('change', function () {
alert("this should fire only on change");
} ) ;
I added the above snippet in the shipments.js file, between the editor portion and the datatables portion. It fires twice, when the input form is opened. It accurately alerts the text when the part_master.part_number field gets changed as expected.
Part 2)
I have a jqueryui datepicker on the top of the form. i can add a default text, but the datepicker popout opens on form load. Is there a way to not display the datepicker popout when the form loads. Only when the user clicks on the field or graphic.
fields: [ {
label: 'Ship Date:',
name: 'shipments.ship_date',
type: 'date',
def: function () { return new Date(); },
dateFormat: 'yy-mm-dd',
dateImage: 'tables/DataTables-1.10.0/media/images/calendar.png'
} // more code continues after this
Hello, if it is also possible to import a excel file into DataTables and maybe update values from that excel file? I mean that I can also Update mysql data via import a excel file?
Hello, I have tree view i want to filter on click in tree item.
DataTables is a fantastic app.
Thank you!
Have been able to successfully incorporate several features/plug-ins.
For a newbie like me, easy and straightforward to incorporate options.
But I'm stuck and hopefully someone can offer path forward.
I believe the issue I'm seeing is one of timing.
I need to delay initialization until after my HTML div element is loaded, which is where I have my table in HTML format.
How do I do that?
My example goes like...
<html>
<head>
<link rel="stylesheet" href=".../jquery.dataTables.css">
<script type="text/javascript" src=".../jquery-1.11.1.min.js"></script>
<script type="text/javascript" src=".../jquery.dataTables.min.js"></script>
</head>
<body>
<div id='example'></div>
<script type="text/javascript">
$(document).ready(function() {
$('#example').dataTable( {
} );
} );
</script>
</body>
</html>
The table data in HTML formal is created upstream using js. But, it is not finished before I attempt to initialize DataTables, so the table just outputs as a static table.
The HTML looks like...
<table id='example' class='display'><thead>....</thead><tbody>...</tbody></table>
If I pass the table data as a string via js to the HTML page like...
<script type="text/javascript">
var html = localStorage.getItem("html");
document.write(html);
</script>
The DataTables works great, but that creates other timing issues.
Again, basically I believe I simply need to delay initialization until after my div element is loaded.
Thanks in advance.
I have a page with 2 tables, company & member details with a left join
is it possible to update data in the joined (members) table, as anything i try to change is ignored
http://www.test3.forthwebsolutions.com/admin/contacts/plugins/corporate_resultstest.php
the 'expires', 'complimentary' and 'premium' fields are all in the linked table, the others, which update ok, are in the main table
I'd like to have a delete button in my form. I tried the code below. It generates a confirmation box with a confirm delete button but when I click the button nothing happens. It keeps looping. An answer to my problem would be greatly appreciated.
Here is the link to my page: http://editor.uhmind.com/examples/api/backNext.html
label: 'delete',
fn: function (e, data, remove) {
this.title('Delete row')
this.buttons('Confirm delete')
this.message('Are you sure you want to remove this row?')
this.remove(this);
}
Hi, I am using the Data tables to show the dynamically generated data. The data which is to be showed will be generated based on number of years. If we select 10 years, then we will get data in the form of JSON. So I am building the html table using jquery and applying fixed column properties of the datatables to0 my table(first and last columns).
The problem here is, when ever I select lesser number of years(particularly <6), the last column is always at fixed position in the UI and the area between First and Last columns is being occupied by the columns by dynamically generated data with some dynamically generated width. I want to move the last(right most-which was fixed) column should move to the left side if the data is less. If the data is more (i.e is the number of years greater than 5) then automatically the last column (right most) should move to right side and fit to the screen (in my case my layout).
Is there any solution for this. What are the attributes to be set to get it done. Please provide me the solution.
after using : DTInstances.getLast().then(function (dtInstance) { dtInstance.DataTable.rows().invalidate().draw(false); }); to apply sort, IE and Firefox crash after period of time and when checking memory for IE and Firefox, memory increasing
please, check the following URLs for images contain memory progress in ie :
http://54.191.119.153:8080/static/ie-21.png http://54.191.119.153:8080/static/ie-22.png
A common question in the forums is when using scrollY (which adds a vertical scrollbar to the table), how to set the table height so that the entire web page is sized to just fit the browser window (so that the browser doesn't display its own scrollbars, as the user doesn't need to have two sets of scrollbars to fiddle with, and also so all the available window space is utilized).
One approach is to calculate the heights of the other elements on the page, so that the table body height can be set to
(window height) - (height of other elements)
However I noticed there looks like there's a way to heuristically figure out the height, without having to calculate the height of the other elements. There may be some gotcha I'm not aware of, so I don't know if this will work in all cases, but I'll pass on the trick in case it would be useful to others.
The body height is the combined height of all the elements on the page, while the window height is what's visible. When the body height is greater than the window height, the browser displays scrollbars. To have the web page fill the available space in the window, what we want is for the body height to end up being the same as the window height.
Here's the trick: we can figure out the height of the other elements on the page by subtracting the current height of the table body from the body height:
var otherHeight = $('body').height() - $('.dataTables_scrollBody').height()
To get the body height to end up the same as the window height, we want the sum of the other element heights and the table body height to be the window height:
var tableHeight = $(window).height() - otherHeight - 1;
I subtract an extra pixel for Firefox, which otherwise displays the browser scrollbars if the body height is exactly the window height.
Now we can set the height of the table body:
$('.dataTables_scrollBody').css('height', tableHeight + 'px');
And poof, the table magically sizes so that the entire page fits exactly within the browser window :-)
Of course, you might like to also set a minimal table height, so that if the browser window is really short the table still appears, at the cost of having the browser scrollbars appear when that happens.
tableHeight = Math.max(200, tableHeight);
a) I am 100% certain i'm not loading datatables 1.9 hah. b) if I do:
var someTable = $("#table").dataTable(); I can call .fnClearTable() on it, but if I do someTable.clear() I get method undefined.
if I do someTable.rows.add([ ] ); I get undefined.
is there some flag I need to flip to 'enable' the newly named API?
Hello guys, as title feature , i don`t know i can load DataTable as a function, i can use this function anywhere,anytime,i.e event onload ,etc... .See at below
$(document).ready(function () {
var table;
function load_table() {
table = $('#div_table').DataTable({
"processing": false,
"serverSide": false,
"ajax": {
"url": "../BUS/WebService.asmx/LIST_LOCATION",
dataSrc: function (json) {
return $.parseJSON(json.d);
},
"dataType": "json",
"contentType": "application/json; charset=utf-8",
"type": "POST"
}
});
}
onload = function () {
load_table();
}
});
I try it and it not work. Ok, please give me some your advice. Thank you.