Hi,
I am working on data table server side processing. My Table is working perfectly but It is not responsive. How to make table responsive?? I also want to set back ground on my table's column. thanks in advance.
↧
Responsive Table and Header Color Set Server Side Processing
↧
Datatable issues when adding rows individually and memory leaks when adding in bulk
Hi
We are trying to use datatable and we are experiencing issues.
If we push rows in to the table individually then we get slow running script messages
If we push rows in to the table as an array then we see potential memory issues with IE
We need the table to refresh every 60 seconds and when processing rows manually, we have tied
removing and adding, and just replacing the data of existing rows.
The data is 370k, has 23 rows and there are 550 rows.
The data is pushed to the client through an ajax call but not through the datatable's ajax/server feature.
We are using version 1.10.11
Any help would be appreciated.
Thanks.
//example of code that pushes in the array.
var tableType = function(data)
{
self.prop1 = data.prop1;
self.prop2 = data.prop2;
self.prop3 = data.prop3;
self.prop4 = data.prop4;
self.prop5 = data.prop5;
self.prop6 = data.prop6;
self.prop7 = data.prop7;
self.prop8 = data.prop8;
self.prop9 = data.prop9;
self.prop10 = data.prop10;
self.prop11 = data.prop11;
self.prop12 = data.prop12;
self.prop13 = data.prop13;
self.prop14 = data.prop14;
self.prop15 = data.prop15;
self.prop16 = data.prop16;
self.prop17 = data.prop17;
self.prop18 = data.prop18;
self.prop19 = data.prop19;
self.prop20 = data.prop20;
self.prop21 = data.prop21;
self.prop22 = data.prop22;
self.prop23 = data.prop23;
self.prop24 = data.prop24;
self.prop25 = data.prop25;
}
var updateBoard = function (data) {
var tableTypes = [];
for (var i = 0; i < data.length; i++) {
var myType = new tableType(data[i]);
tableTypes.push(myType);
}
dt.clear();
dt.rows.add(tableTypes);
dt.draw();
tableTypes = null;
}
↧
↧
simple case, but I can't deselect all rows
Hi, I'm a datatables newbie so forgive me if I'm making obvious mistakes:
I've read many examples on the website, then I downloaded the examples, and tried to customize a simple one ( "Row selection (multiple rows)" ).
Then I tried to add another button to deselect all rows but, after trying all sorts of API calls I keep failing... but I know I'm a newbie.
I need help... thanks for any hint.
While the is console logging: "TypeError: table.rows(...).deselect is not a function". The example "row count works"
here's the code I'm using in the "init" script:
$(document).ready(function() {
var table = $('#example').DataTable({
select: true
});
$('#example tbody').on( 'click', 'tr', function () {
$(this).toggleClass('selected');
} );
$('#button').click( function () {
alert( table.rows('.selected').data().length +' row(s) selected' );
} );
$('#reset').click( function () {
table.rows().deselect();
} );
} );
and this is how I altered the example table code
<button id="reset">Reset</button>
<button id="button">Row count</button>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
↧
editor.autoComplete
https://editor.datatables.net/plug-ins/field-type/editor.autoComplete
I have this working fine with inline editing, but no autocomplete window is showing if I use the main modal editor. The autocomplete is making its ajax calls correctly, just the results window isn't showing. Is this a known issue or am I missing something?
↧
ASP.NET Core support
Hi,
Any plans for creating a NuGet package compatible with ASP.NET Core?
Best regards,
Roel Alblas
↧
↧
Editor: Sybase database support
Hello,
I would like to know if there is any plan to support Sybase / Sql Anywhere database driver like you already do with Sql Server, Oracle, ...
Or do we have to create an unofficial Odbc driver support in order to use Editor componant?
The problem with Odbc driver is that last_insert_id is not supported.
Thanks in advance and have a nice day.
↧
Problem with "bStateSave": true,
Hello together,
I need your Help.
Following:
I have 3 different lists, used DataTables.
Settings:
"bStateSave": true,
Problem: For exmple I am in ListA on Page 3 and click ListB. The Page 3 is preselected, but some time ListB has only 2 Pages and unfortunately I was moved to Page 3, because this state is saved.
How can I make DataTables more flexible? Or better to move user to page 1? But how? I use ajax with SetInterval...
Thx
↧
Replacing original sorting icons with Bootstrap 4
I am trying to figure out how to replace the original icons (up/down arrow). I added the following code which adds FontAwesome alternatives.
table.dataTable thead th {
position: relative;
background-image: none !important;
}
table.dataTable thead th.sorting:after,
table.dataTable thead th.sorting_asc:after,
table.dataTable thead th.sorting_desc:after {
position: absolute;
top: 12px;
right: 8px;
display: block;
font-family: FontAwesome;
}
table.dataTable thead th.sorting:after {
content: "\f0dc";
color: #ddd;
font-size: 0.8em;
padding-top: 0.12em;
}
table.dataTable thead th.sorting_asc:after {
content: "\f0de";
}
table.dataTable thead th.sorting_desc:after {
content: "\f0dd";
}
Then in dataTables.bootstrap4.css, I modified this code to remove the original arrows but it doesn't.
table.dataTable thead .sorting:before,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_asc_disabled:before,
table.dataTable thead .sorting_desc_disabled:before {
right: 1em;
content: "\2191";
}
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_desc_disabled:after {
right: 0.5em;
content: "\2193";
}
modified to
table.dataTable thead .sorting:before,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_asc_disabled:before,
table.dataTable thead .sorting_desc_disabled:before {
}
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_desc_disabled:after {
}
It still shows the original arrows. The only other css I am loading is buttons.dataTables.min.css but that doesn't have anything to do with the arrows from what I can see.
Thank you
↧
data-priority not working with bootstrap?
this is my testing URL:
https://goo.gl/jZJbfX
I have set data-priority to 3 <th> but I see no effect at all.
Also in responsive mode when I click the blue (+) icon I cant type in the textfield.
Yesterday I could make it with the base theme.
↧
↧
DataTables Editor - can the edit form be a full page and scrollable
I know I can do inline editing and bubble editing with the Editor, but my data for a row requires a number of fields to be created/edited..
My current implementation for editing an item is a separate web page that is scrollable so all fields can be seen and edited.
Is this possible with DataTables Editor and, if so, is there an example?
Regards,
Jim
↧
Downloadable documentation (reference manual) for Datatables and Editor
I work quite a bit offline thus the question about downloadable documentation for both Datatables and Editor.
Does such a thing exist?
Regards,
Jim
↧
FixedHeader quirk
I have a table with some long columns, I size them on init the way I want them.
I am using fixedHeader, and when it unsticks the columns resize.
How to catch this unsticking and resize my columns to the correct width when it happens?
↧
Add 2 buttons in the same cell
So here is my problem, I generate data from a web api that returns a json object, lets say it does this...
{
"id" : "1g6th5lz3",
"name" : "John",
"position" : "CEO"
}
So I have a table that has 3 columns, Name, Position and Actions, the action is dependant on the id, something like this:
$(document).ready(function () { var table = $("#users").DataTable({ ajax: { url: "/api/users", dataSrc: "" }, columns: [ { data: "Name" }, { data: "Position" }, { data: "id, render: function (data) { return "Delete"; } }, ] }); });But when I try to add a second button with another render function, it show just the last one, I want to know if there is a way to add another button in the same cell.
↧
↧
Reuse Uploaded Image on other rows
The upload seems to work very well. What I want is where the user can select from a list of images already uploaded (maybe with a filter) OR upload a new image. How can I accomplish this?
Currently it works but every row in the Editor uploads a new file. This can be a problem if the user wants to update the file that might be linked on multiple rows.
↧
Prevent form-inline class?
Is it possible to prevent form-inline class when opening an hidden row with a form inside it?
↧
Select2 with parent/child tables
I have parent/child tables working using the example:
https://datatables.net/examples/advanced_init/column_render.html
But Select2 complicates things a bit. The first issue is inline editing a multi-select select2 field. Once I click inside the field the select handler is called. I added a check to validate the data object exits in the handler:
table.on( 'select', function () {
sort_table.ajax.reload();
if (table.row( { selected: true } ).data()) { //if data() does not exist then editing a select2 field
$('.cmd').text(table.row( { selected: true } ).data().main.name + ' Commands');
sort_editor
.field( 'DT_RowId' )
.def( table.row( { selected: true } ).data().main.pkid );
}
} );
Not sure if this is the best method but it works. I'm running into another issue which I haven't solved yet and looking for some pointers. I'm selecting theparent row with the first column checkbox.
select: {
style: 'single',
selector: 'td:first-child'
},
Problem desc: I select a row and the child table is loaded. While selected I edit the multi-select select2 field and click another column in the selected row to complete the edits. The update for that field is sent to the server and all is good. But the child table is not triggered to update. I can reselect that row and it displays properly. Is there a way I can trigger an update of the child table?
The also happens if I use the Editor window instead of inline editing.
Kevin
↧
Default value not showing in editor text field
I have initialized an editor text field with
type:'text',
attr:{
type:'number',
min:0
},
def:'0'
Everything is working except the** default value** of the field (The text field remains empty at new)
I even tried extending the text field and setting val with jquery but still the same.
_fieldTypes.number = $.extend(true, {}, _fieldTypes.text, {
create: function (conf) {
conf.attr = conf.attr || {};
conf.attr.type = conf.attr.type || "number"
// Call original create
conf._input = $(_fieldTypes.text.create.call(this, conf));
return conf._input;
},
set: function (conf, val) {
return $(conf._input).val(val)
},
});
From the debugger I noticed that during set the val parameter is correct (0) but when setting the input val with jquery nothing happens when $(conf._input).val(val).
↧
↧
zeroRecords lenguage not working
i have a input text for search in 4 diferents table but zeroRecords lenguage dosn't work
here is mi 4 initialisation
$('#tblCatalogo1,#tblCatalogo2,#tblCatalogo3,#tblCatalogo4').DataTable({
//"scrollY": "280px",
"scrollCollapse": true,
"paging": false,
"info": false,
"zeroRecords": "NO HAY RESULTADOS",
"lengthMenu": [[5,10,50,100,-1], [5,10,50,100,"Todo"]],
"language": {
"paginate": {
"first": "Primera",
"last": "Última ",
"next": "Siguiente",
"previous": "Anterior"
},
"lengthMenu": "MOSTRAR _MENU_",
"emptyTable": "No hay datos disponibles en la tabla",
"search": "BUSCAR"
}
});
here is mi input text for search
$('#searchCatalogo').on( 'keyup', function () {
var table = $('#tblCatalogo1,#tblCatalogo2,#tblCatalogo3,#tblCatalogo4').DataTable();
table.search(this.value).draw();
});
what is wrong?
↧
Cannot reinitialise datatable
Hi,
I have a function defined like below and I am trying to use the same function in another jsp file to make the modal stay in same page. But, I get the error. I am just calling the same function without declaring jQuery('#automap_err').DataTable() anywhere in the jsp again as it is already defined in the function in another js file. Please help
DataTables warning: table id=automap_err - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3
function refreshTable()
{
try{
var _t = jQuery('#automap_err').DataTable();
_t.draw(false);
}catch(e){}
}
↧
Any suggestion how to keep the table headings fixed when scrolling
I am wondering if with Datatables there is a way to keep the table headings fixed when scrolling?
↧