Hello!
At the moment I'm attempting to add another column to my page. However, I will get an ajax error whenever I do. It's fine with 10 columns, but as soon as I add the 11th, the ajax error will appear.
Here's my debugger
http://debug.datatables.net/ewolon
And the console error shows:
responded with a status of 403 (Forbidden)
Hi Datatables Community,
i can't solve a problem with row_childs / subtables...
I found a good jsfiddle explaning row childs and got them working for me, except one thing. I need to display different data for each subtable.
Tried to work with row id's but cant get it to work.
How can i change the sections variable to display different data for each subtable?
I downloaded table editor this morning. I have been trying to get it working all day. The .js seems to be working fine. The CSS is not. I have moved the link and script files all over the place. I am working on an apache server. I beginning to think it has something to do with the file structure. I placed the DateTables folder from the zip file in the root.
This is in the head.
<script type="text/javascript" src="../DataTables/jQuery-2.2.4/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../DataTables/datatables.min.js"></script>
<link rel="stylesheet" type="text/css" href="../DataTables/datatables.min.css"/>
<link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css">
This is script
<script>
$(document).ready( function () {
$('#prtable').DataTable();
} );
</script>
This is the table tag
<table id="prtable" class="display-stripe" cellspacing="0" width="10
The table has sorting, searching capability which seems fine. Just no CSS
The DataTable folder from the zip file has datatables.css in the root, which is the one I am using.
Any Help would be appreceiated.
Thanks, Wiley
Hi Support,
How can i add order by clause while data Fetch from Server.
Regards
Sunil
I can't figure out why I can't integrate any field type plugins. The console always outputs **Uncaught Error adding field - unknown field type selectize** (tried select2 and CKEditor). I'm current running the trial version. Could this be the reason?
Currently
- script load order has the selectize.min.js loading after the dataTable.editor.min.js script
- selectize is being initialized using the fields.type option.
fields: [ {
label: "Category:",
name: "category_name",
type: "selectize"
}, {
label: "Subcategory:",
name: "subcategory_name",
type: "selectize"
}]
The most trivial bug you'll ever have reported...
On https://datatables.net/reference/option/language.infoEmpty it states "Table summary information string used when the table is empty or records." and I think it should be "...of records."
The same typo is also on https://www.datatables.net/reference/option/
Hi Allan,
I would like to make sure of scroller speed implementation. I am able to group row, expand/collapse, however, scroller will not show all grouped row if I do a collapse all. I believe it has got to do with rendering window. Is there a workaround to this, if you could point to me the right direction.
Thanks in advance
hi!
i am developing a module for the awesome processwire cms for datatables: https://processwire.com/talk/topic/15524-preview-rockdatatables/
the principle is to populate all the columDefs BEFORE initializing the table because that way i can control most of it on the backend and modify only the needed columns by referencing them via their name and not via their index (this makes rearranging/removing/adding columns via the backend very easy).
i have a table that should render currency values as formatted locales, so i created a render function for this:
$(document).ready(function() {
// setup variables
var opt = ProcessWire.config.dt_kundenliste; // options from backend
var colDefs = []; // column definitions
// custom column definitions here
colDefs.push({
---------------
targets: 'euro', // does NOT work :(
// [3,4,5] works
// opt.colnames.indexOf('net2017'), works
---------------
render: function ( data, type, full, meta ) {
if(type === 'display') {
var num = parseFloat(data);
if(num) {
return num.toLocaleString('de-DE', {
/*style: 'currency',
currency: 'EUR',*/
minimumFractionDigits: 2
});
}
}
return data;
},
});
// load default column definitions
colDefs = colDefs.concat(dtGetDefaultDefs(opt));
// initialise table
$('#dt_kundenliste').DataTable({
ajax: {
url: './kundenliste/',
type: 'post',
data: function(d) {
d.year = $('#year').val();
},
},
columnDefs: colDefs,
/*scrollY: "400px",
scrollCollapse: true,*/
scrollX: "100%",
pageLength: 10,
});
});
the default coldefs are populated like this:
/**
* get default options for columns
* @param {object} opt; options that are set via PHP
* @return {array}
*/
var dtGetDefaultDefs = function(opt) {
var defs = [];
// loop over all columns
var i;
for(i=0; i<opt.cols.length; i++) {
defs.push({
targets: i,
title: (opt.cols[i].title ? opt.cols[i].title : opt.cols[i].name),
data: opt.cols[i].name,
className: opt.cols[i].class,
});
}
//console.log(defs);
return defs;
}
the problem is that is does NOT work when using a classname to select. but the classname is defined properly (see screenshot).
am i doing anything wrong or is this a bug?
thank you for your help!! 
Hello,
I have a working datatable on my website until I added 200.000 rows to my sql table.
The data is not showing at all. I tried to open the ajax response in my browser but it gives me an xml error.
I looked in the forum and learned about server-side processing.
I added that option and i got an ajax error saying that i should visit datatables website for more information about the error
I removed my 200.000 rows and everything is working again.
is there something specific for the C# .NET in order to get server side processing working ?
Regards.
Hello,
Is there anyone that can take a look at my code and help me figure out why I'm receiving "[object Object]" instead of the URLs I should be receiving.
The data table is under a column called: URL with links formatted as "https://www.google.com".
Attached is what is rendered to the end user.
I attempted to follow a previous thread on this issue but im not understanding hope the issue was resolved. Please assist!
https://datatables.net/forums/discussion/27167/how-do-get-data-in-row-datatable
<table width="100%" cellspacing="0" class="display" id="example"><thead>
<th>Title</th>
<th>Notes</th>
<th>URL</th>
<th>Platform</th>
</thead></table>
<br><br><br>
<script language="javascript">
$(document).ready(
function(){
// ajax call to get the list data using REST
var call = $.ajax({
url: _spPageContextInfo.webAbsoluteUrl + "/_api/Web/Lists/GetByTitle('TeamLinks')/items?$top=200",
type: "GET",
dataType: "json",
headers: {
Accept: "application/json;odata=verbose"
}
});
// this gets called when the AJAX completes.
// this populates the table created above
call.done(function (data,textStatus, jqXHR){
$('#example').dataTable({
"bDestroy": true,
"bProcessing": true,
"aaData": data.d.results,
"aoColumns": [
{ "mData": "br3e" },
{ "mData": "Comments" },
{ "mData": "URL" },
{ "mData": "Platform" }
],
dom: 'T<"top"if>rt<"bottom"lp><"clear">',
tableTools: {
"sSwfPath": "/sites/GPNOC/Style Library/swf/copy_csv_xls_pdf.swf"
}
});
});
// Render clickable HTML
// called if the AJAX fails
call.fail(function (jqXHR,textStatus,errorThrown){
alert("Error retrieving Tasks: " + jqXHR.responseText);
});
}
);
</script>
Is that confirmed issue, or is it in my implementation only that the filter input fires twice. Once immediately on the first letter typed, and second time after the set delay time. I see that in few of my datatables implementations for version 1.10.10
I am using a jquery dataTable(not DataTable) in my view. I have
"paging": true,
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
in the javascript file. However, the table still shows all records in one page. I expected to see 10 records in each page.
style files:
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css" rel="stylesheet"/>
and scripts:
script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script
<script src="https://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script
<script src="/Scripts/myscript.js" type="text/javascript"></script>
Somebody asked the similar question and one common reason was because jquery.js was rendered twice. But it seems I don't have this problem.
Can anybody give some suggestion? Thanks very much.
I use the row grouping datatable plugin. On the following script i have a background color for each new rows of the group according to the name of the group .
That s not what i want, I would like to add a background color directly on the row of the group. ex : when the group name "Cardio-training" is deteted, i would like to add a background color on it. ( see on the attached image )
Have you got an idea? thank you
here is the javascript/jquery script :
api.column(3, {page:'current'} ).data().each( function ( group, i ) {
if ( last !== group ) {
$(rows).eq( i ).before(
'<tr><td class="espace" colspan="5"></td></tr>',
'<tr class="group"><td colspan="5">'+group+'</td></tr>'
);
last = group;
}
} );
"createdRow" : function (tr, tdsContent) {
if (tdsContent[3] === 'Cardio-training' {
tr.style.backgroundColor='red'; }}
When the value in #table2 is modified in editor, #table1 needs to redraw as some values has change.
Therefore I have the code:
var editor = new $.fn.dataTable.Editor({
ajax: 'php/page...[some_link].... .php,
table: '#table2',
fields: [
{
"label": "something",
"name": "something"
}
]
}).on('submitComplete', function () {
var my_table = $('#tabel1').DataTable();
// my_table.ajax.reload(); - also tried as I thought it requires to refresh with data from server
my_table.draw();
});
But no success. What do I do wrong?
I search but i cant found i want add button and creat new fields with array?
like that:formvalidation.io/examples/adding-dynamic-field/
Thank you
For the benefit of other users:
I was able to activate the data table in hybrid mode.
The following configuration allow you to do an initial Post on load to your ajax function. The main difference is that with server side false , the post request has no parameters, if you require parameters you can build them int he query string for the post request definition in the ajax definition as shown below with the variable that defines the ajax URL definition.
var table = $('#bundletbl').DataTable({
processing: true,
serverSide: false,
lengthMenu: [10, 25, 50],
select: true,
dom: 'Blrtip',
ajax: {
"url": "<?php echo APP_URL ?>adm/ajax/partners?id" <?php echo $ID ?>,
"type": "POST"
},
columns: [
{
className: 'details-control',
orderable: false,
data: null,
defaultContent: ''
},
{ "data": "partner" },
{ "data": "DT_RowId" },
{ "data": "appname" },
{ "data": "appid" },
{ "data": "apiurl" },
{ "data": "hostname" }
]
});
// Apply the search
table.columns().every(function () {
var that = this;
$('input', this.footer()).on('keyup change', function () {
if (that.search() !== this.value) {
that
.search(this.value)
.draw();
}
});
});
I was not able to find this specific solution in the forums nor stack overflow. The above allows you to load data tables with the initial load from the ajax Post call, then since server side is false the data tables jquery framework takes care of the search and the sorting. This is very efficient since ideally the initial query is reducing the amount of data shown for a user. Typically you will never display thousands of records for a given user and the performace is improved for the user given the fact that there is no need to do ajax call on every keystroke when searching.
If you require to refresh the table with ajax calls you can manipulate the ajax call with other methods or events.
Hope this will save time to other people who are looking for the same answer.
I use this script to enable some buttons if a row is selected:
ulist.on('select', function () {
var selectedRows = ulist.rows( { selected: true } ).count();
ulist.button( 1 ).enable( selectedRows === 1 );
ulist.button( 2 ).enable( selectedRows === 1 );
ulist.button( 3 ).enable( selectedRows === 1 );
});
If the Page with the Table is new loaded, the Button are disabled. If I select a row the buttons are enabled.
I deselect the row, the buttons should now disabled again, but the Button are enabled and create an error if
you click on the Button without selection. How can I disable the button if the user have deselected all rows?
Andreas
i have a data table with textboxes in some columns. when i click the print button, the values in the textboxes does not show in the print view page.
Im using yadcf 1.10 and im trying to do the following:
i have a multi_select filter above some Columns and i want that only those rows are shown, which DONT contain the selected values.
Example:
| apple |
| beer |
| plant |
| tree |
| meat |
| fish |
| tree/beer |
| meat/apple |
==> i select apple AND beer:
| plant |
| tree |
| meat |
| fish |
| tree/beer |
| meat/apple |
==> cleared search and now selecting tree AND beer AND meat AND fish:
| apple |
| plant |
| meat/apple |
How can i do this server-side?
I am using server side processing (AJAX requests) to get my table with data. I am getting the correct data. However, pagination is not working. The table info on the bottom left says Showing 1 to 10 of 182 entries and the bottom right shows the page numbers as well but the table shows all the possible records in the first page itself. Here's the code I use:
$(tableId).DataTable({
"paging": true,
"scrollX": true,
"filter": false,
"serverSide":true,
"columns": [
{"data":'transaction_id'},
{"data":'merchant_id'},
{"data":'merchant_provider_id'},
{"data":'transaction_uuid'},
{"data":'transaction_status_type'},
{"data":'transaction_payment_method'},
{"data":'transaction_amount'},
{"data":'transaction_amount_aud'},
{"data":'transaction_aud_exchange_rate'},
{"data":'transaction_amount_usd'},
{"data":'transaction_usd_exchange_rate'},
{"data":'transaction_currency'},
{"data":'transaction_created'},
{"data":'transaction_processed'},
{"data":'transaction_settled'},
],
"ajax": {
"url": requestUrl,
"data": values
}
});