I am trying to reload my table on the click of a button using table.ajax.reload().
I'm getting an invalid JSON error and upon going through troubleshooting with datatables/tn1, I can see that it is returning html/text instead of JSON.
How do I parse the data on reload?
I've tried various ways of combining table.ajax.reload() with JSON.parse(), but none have worked.
Thanks
Hello, I have DataTable with button in row child. I have hidden content below the button and I need to display this hidden content after click on this button. I tried it on my own, but the best working version was, that the button in one row child also manages the content of all other childrows. 
He re is my test case https://jsfiddle.net/nnb97rh9/1604/
Thank you
My Code is soothing like
buttons: [
{
extend: 'csvHtml5',
text: 'Salesforce CSV ',
exportOptions:
{
columns: [2,9,10,11,12,15,14,13,16,23,17,18,19,20,21,22,24]
}
},
{
extend: 'csvHtml5',
text: ' Outlook CSV',
exportOptions:
{
columns: [2,9,10,11,12,15,14,13,16,23,17,18,19,20,21,22,24]
}
},
],
I wanted to change Column 17, 18 , 19 name while exporting.
For both CSV files column names should be different
Hi,
I'm using responsive, colvis and colreorder with statesave
I'm having the following issue
See the jfiddle to reproduce
http://jsfiddle.net/lenamtl/v341qbyx/23/
I have a lot of columns some are hidden by responsive
Hide some column with colvis till you see one of the column which is hidden by the responsive
based on the jsfiddle example let hide all except Role and Register date
-the result is ok in table and in statesave value
Let move one column register date in front of Role
so now we have Role, Register date and Tool
Now let show all hidden columns using colvis
the result is ok in table and in statesave value
so now we have Role, register date ( all other columns) and tool
refresh the page
the result in table is NOT OK the colunm Register date is now Hidden (have display none class)
the result is ok in statesave value (the column is visisble in statesave)
So this mean this column keep the class display none class from responsive
but the column have change position so the column display none class should be removed and it is not
I need an urgent quick fix for this.
Thanks
I have a table with a complex header (huge amount of columns). I am using the colvis button to show a list of the columns in the table and to toggle column visibility. I would to add to that list a scroll bar. I know that you can add columns to the list but I would like to add a scroll bar to facilitate to search the desired column.
I would like something like that...
It would be possible?
Thank you in advanced.
I found this API page on google for column().name(). It says "Since DataTables 2.0.0", but I can't find any other mention of DataTables 2.0.0 anywhere! Is this something that's in development, or...?
We want to Know logic of table row sorting in data table
In our project data show correct but i want to highlight the latest record but i dont get i value in while loop . Its shows randomly value of i if we printed
Please give me proper guidance
Hi,
I'm trying to test a package created by generator and I have the error
Missing Method System.String[] System.String.Split(Char, System.StringSplitOptions)
This error has been already discussed here.
The error happens either with Nuget package and with downloaded trial and with .net 4.5 and 4.6 (editor version 1.8.1).
Looking at the stacktrace it seems depends on the Editor DLL :
[MissingMethodException: Impossibile trovare il metodo 'System.String[] System.String.Split(Char, System.StringSplitOptions)'.]
DataTables.DtRequest.HttpData(IEnumerable1 dataIn) +0
DataTables.DtRequest._Build(IEnumerable1 rawHttp) +107
DataTables.DtRequest..ctor(IEnumerable`1 rawHttp) +210
DataTables.Editor.Process(NameValueCollection data) +297
DataTables.Editor.Process(HttpRequest request) +127
EditorGenerator.api.OffersRows.Page_Load(Object sender, EventArgs e) in C:\Users\roby\Desktop\EditorGenerator\EditorGenerator\api\OffersRows.aspx.cs:18
System.Web.Util.CalliEventHandlerDelegateProxy.Callback(Object sender, EventArgs e) +51
System.Web.UI.Control.OnLoad(EventArgs e) +95
System.Web.UI.Control.LoadRecursive() +59
System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +678
Suggestions are welcome!
Thanks!
Roberto
I have data like this (simplified):
[
{
"songid": "56",
"title": "Song A",
"tagged": "0",
"audio": "1",
"chords": "1"
},
{
"songid": "7",
"title": "Song B",
"tagged": "1",
"audio": "0",
"chords": "1"
}
{
"songid": "24",
"title": "Song C",
"tagged": "0",
"audio": "0",
"chords": "0"
}
]
I want to do two things when the table is set up. The first is to render the title cell with stuff that comes from three other pieces of data in the row: songid, audio, and chords. The song title would become a hyperlink that uses the songid, and that would be followed by an icon if audio=1 and/or another icon if chords=1. For example, the desired result for the first row in the above example is:
<a href="song.php?sid=56">Song A</a> <img src="graphics/audio.gif"> <img src="graphics/guitar.gif">
The docs give the following example of using a function for columns.render:
render: function ( data, type, row, meta ) {
return '<a href="'+data+'">Download</a>';
}
But I don't know how to reference a different column. Just from the parameter names, it looks like row might somehow hold the data for the whole row or something, but I don't know how to use it and can't find any documentation about it. Just for the simple hyperlink part, I tried:
render: function ( data, type, row, meta ) {
return '<a href="song.php?sid='+row.songid+'">'+data+'</a>';
}
But it returned "undefined" for row.songid.
The second thing I want to do is pre-select the rows that have tagged=1. Based on clues I picked up from various sources in the docs, I thought this would do it:
table.rows( function(idx, data, node) { return data.tagged == 1; }).select();
But it doesn't appear to do anything - no rows get selected.
Any clues on either of these?
I have created an api but it loads all the data and ignore serverside:true, please help?
$(document).ready(function () {
$.ajax({
"dataType": "application/json",
"type": "GET",
"url": "http://localhost:54888/api/order",
"success": function (dataStr) {
console.log(dataStr.responseText);
// laod Data to DataTable Jquery
var resp = jQuery.parseJSON(dataStr.responseText ? dataStr.responseText : dataStr);
$('#example').DataTable({
data: resp["rows"],
columns: resp["aoColumns"],
scrollX: true,
autoWidth: true,
bScrollCollapse: true,
// paging: true,
// retrieve: true,
"jQueryUI": true,
/serverSide: true,
processing:true
});
},
"error": function (dataStr) {
//console.log(dataStr);
var resp = jQuery.parseJSON(dataStr.responseText ? dataStr.responseText : dataStr);
$('#example').DataTable({
data: resp["rows"],
columns: resp["aoColumns"],
scrollX: true,
autoWidth: true,
bScrollCollapse: true,
//paging: true,
//retrieve: true,
"jQueryUI": true,
serverSide: true,
processing: true
});
}
})
});
There are some errors in this version:
line 239: group = that.c.emptyDataGroup;
should be (that is undefined):
line 239: group = this.c.emptyDataGroup;
line 325: if ( typeof display === 'object' && display.nodeName && display.nodeName.toLowerCase() === 'tr') {
should be (display may be null):
line 325: if ( typeof display === 'object' && display && display.nodeName && display.nodeName.toLowerCase() === 'tr') {
line 328: else if (display instanceof $ && display.length && display[0].nodeName.toLowerCase() === 'tr') {
should be (display may be null):
line 328: else if (display instanceof $ && display && display.length && display[0].nodeName.toLowerCase() === 'tr') {
Hi, We are using DataTables to edit some data on client side, but we have issues if we use reordering option or if we delete rows.
In general we need functionality which is in this example, but on Client side
https://editor.datatables.net/examples/extensions/rowReorder
Do you have any hints how to update DataTables after we do some manipulation like deleting elements or reordering.
It would be perfect to get same example working on Client side data.
I have an editor where I set the language options with an url (file) like
'language': {
'url': '/js/language/datatables_swe.json'
}
the json file contains the same strings that work when I set them in the javascript file
{
"sEmptyTable": "Tabellen innehåller inget data",
"sInfo": "Visar _START_ till _END_ av totalt _TOTAL_ rader",
"sInfoEmpty": "Visar 0 till 0 av totalt 0 rader",
"sInfoFiltered": "(filtrerade från totalt _MAX_ rader)",
"sInfoPostFix": "",
"sInfoThousands": " ",
"sLengthMenu": "Visa _MENU_ rader",
"sLoadingRecords": "Laddar...",
"sProcessing": "Bearbetar...",
"sSearch": "Sök:",
"sZeroRecords": "Hittade inga matchande resultat",
"oPaginate": {
"sFirst": "Första",
"sLast": "Sista",
"sNext": "Nästa",
"sPrevious": "Föregående"
}
}
But when I set them that way the swedish letters å, ä and ö are shown as a questionmark (?).
Any suggestions how I can fix that ?
Hi,
I want to implement a custom action on a button (search and replace). I found already the multi-row (bulk edit) blog post and implementet my function like that.
I have the following javascript code in the Buttons section in my DataTable object:
{
text: "search and replace",
action: function (e, dt, node, config) {
var searchTerm = new RegExp($('#search').val());
var replaceTerm = $('#replace').val();
var rows = table.rows( {selected: true} ).indexes();
editor.edit(rows, false);
$.each(rows, function(i, rowIdx) {
var value = table.cell(node).data();
if (searchTerm !== '' && searchTerm.test(value)) {
if (replaceTerm !== '') {
editor.field('someField').multiSet(row.id(), row.data().someField.replace(searchTerm, replaceTerm));
}
}
});
editor.submit();
},
editor: editor
}
When I am searching and replacing for one term only it works fine. But if I want to search and replace multiple values on multiple rows it won't work.
The replace function works fine. console.log prints out the correct values. But these values aren't set inside the table row(s) and sent properly to the backend.
Any suggestions? Or is this impossible?
I feel like I'm being really dumb here.
I want a checkbox for my editor field. When the user ticks it, I want a number 1 to be sent to the database. When unticked it needs to be a 0.
I tried the following for my editor field:
label: "Tickbox:",
name: "tickbox",
type: "checkbox",
options: [
{ label: '', value: 1 }
],
unselectedValue: 0
When I look at the data in presubmit, I see that it sends the value as an array:
tickbox: (1) […]
0: 1
length: 1
How can I convert this to a number?
As mentioned above, I am attempting to use some Buttons to filter to content. Using a button click, I attempt to filter based on a specific column..
The below works IF I use table.destroy...but doing that causes the table to lose its layout?
initComplete: function () {
//Use Buttons to change Region
$('#table-filters').on('click', function (event) {
var v = $(event.target).val();
var i = event.target.id;
var table = new $.fn.dataTable.Api("#datatable");
table.destroy();
table.column(19).search(v).draw();
});
im want sum columns total but server side ..
client side working all page total sum make but server side just one page sum make ?
im how make total and pagetotal for serverside ?
Hi,
Can I make the Excel that the datatable exports add more data than the ones shown in the table?
Could you customize the query of the Export buttons in Excel and PDF?
One of the tables used in my application has a large number of fields, including two fields used to hold references to file uploads (one an image the other a pdf). Because the number of fields is large, I'm using multiple tabs to segregate the data into reasonable size chunks. Each tab has its own editor to handle the data within that tab. Works well, but I've run into an issue when uploading image and pdf files.
One of the editors ends up referencing the incorrect set of files when attempting to open the editor. I've created a fairly easily replication of the problem starting with the Editor sample upload.html/php. To reproduce, do the following:
Add another column to the users table as pdf int default NULL, and recreate the sample database.
Copy upload.html to uploadTest.html and modify contents as follows:
<snip><snip><snip>
var editor1; // use a global for the submit and return data rendering in the examples
var editor2; // use a global for the submit and return data rendering in the examples
$(document).ready(function() {
editor1 = new $.fn.dataTable.Editor( {
ajax: "../../controllers/uploadTestImage.php",
table: "#editor1",
fields: [ {
label: "Last name:",
name: "last_name"
}, {
label: "Image:",
name: "image",
type: "upload",
display: function ( file_id ) {
return '<img src="'+editor1.file( 'files', file_id ).web_path+'"/>';
},
clearText: "Clear",
noImageText: 'No image'
}
]
} );
var table = $('#editor1').DataTable( {
dom: "Bfrtip",
ajax: "../../controllers/uploadTestImage.php",
columns: [
{ data: "last_name" },
{
data: "image",
render: function ( file_id ) {
return file_id ?
'<img src="'+editor1.file( 'files', file_id ).web_path+'"/>' :
null;
},
defaultContent: "No image",
title: "Image"
}
],
select: true,
buttons: [
{ extend: "create", editor: editor1 },
{ extend: "edit", editor: editor1 },
{ extend: "remove", editor: editor1 }
]
} );
editor2 = new $.fn.dataTable.Editor( {
ajax: "../../controllers/uploadTestPDF.php",
table: "#editor2",
fields: [ {
label: "Last name:",
name: "last_name"
}, {
label: "PDF:",
name: "pdf",
type: "upload",
display: function ( file_id ) {
return '<img src="'+editor2.file( 'files', file_id ).web_path+'"/>';
},
clearText: "Clear",
noImageText: 'No image'
}
]
} );
var table = $('#editor2').DataTable( {
dom: "Bfrtip",
ajax: "../../controllers/uploadTestPDF.php",
columns: [
{ data: "last_name" },
{
data: "pdf",
render: function ( file_id ) {
return file_id ?
'<img src="'+editor2.file( 'files', file_id ).web_path+'"/>' :
null;
},
defaultContent: "No PDF",
title: "PDF"
}
],
select: true,
buttons: [
{ extend: "create", editor: editor2 },
{ extend: "edit", editor: editor2 },
{ extend: "remove", editor: editor2 }
]
} );
} );
</script>
</head>
<body class="dt-example php">
<div class="container">
<section>
<h1>Editor example <span>File upload</span></h1>
<div class="info">
<p>This example shows Editor being used with the <a href="//editor.datatables.net/reference/field/upload"><code class="field" title=
"Editor field type">upload</code></a> fields type to give end users the ability to upload a file in the form. The <a href=
"//editor.datatables.net/reference/field/upload"><code class="field" title="Editor field type">upload</code></a> field type allows just a single file to be
uploaded, while its companion input type <a href="//editor.datatables.net/reference/field/uploadMany"><code class="field" title=
"Editor field type">uploadMany</code></a> provides the ability to have multiple files uploaded for a single field.</p>
<p>The upload options of Editor are extensively documented in the manual (<a href="//editor.datatables.net/manual/upload">Javascript</a>, <a href=
"//editor.datatables.net/manual/php/upload">PHP</a>, <a href="//editor.datatables.net/manual/net/upload">.NET</a> and <a href=
"//editor.datatables.net/manual/node/upload">NodeJS</a>) and details the various options available.</p>
<p>In this example an image file can be uploaded, limited to 500KB using server-side validation. To display the image a simple <code class="tag" title=
"HTML tag">img</code> tag is used, with information about the file to be displayed retrieved using the <a href=
"//editor.datatables.net/reference/api/file()"><code class="api" title="Editor API method">file()</code></a> method which Editor makes available and is
automatically populated based on the server-side configuration.</p>
</div>
<div class="demo-html"></div>
<table id="editor1" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Last name</th>
<th>Image</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Last name</th>
<th>Image</th>
</tr>
</tfoot>
</table>
<table id="editor2" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Last name</th>
<th>PDF</th>
</tr>
</thead>
<tfoot>
<tr>
<th>PDF</th>
<th>Image</th>
</tr>
</tfoot>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<snip><snip><snip>
Then, copy upload.php to uploadTestImage.php and change as follows:
<?php
/*
* Example PHP implementation used for the index.html example
*/
// DataTables PHP library
include( "../lib/DataTables.php" );
// Alias Editor classes so they are easy to use
use
DataTables\Editor,
DataTables\Editor\Field,
DataTables\Editor\Format,
DataTables\Editor\Mjoin,
DataTables\Editor\Options,
DataTables\Editor\Upload,
DataTables\Editor\Validate,
DataTables\Editor\ValidateOptions;
// Build our Editor instance and process the data coming from _POST
Editor::inst( $db, 'users' )
->fields(
Field::inst( 'last_name' ),
Field::inst( 'image' )
->setFormatter( Format::ifEmpty( null ) )
->upload( Upload::inst( $_SERVER['DOCUMENT_ROOT'].'/uploads/__ID__.__EXTN__' )
->db( 'files', 'id', array(
'filename' => Upload::DB_FILE_NAME,
'filesize' => Upload::DB_FILE_SIZE,
'web_path' => Upload::DB_WEB_PATH,
'system_path' => Upload::DB_SYSTEM_PATH
) )
->validator( Validate::fileSize( 500000, 'Files must be smaller that 500K' ) )
->validator( Validate::fileExtensions( array( 'png', 'jpg', 'jpeg', 'gif' ), "Please upload an image" ) )
)
)
->process( $_POST )
->json();
Similarly, copy upload.php to uploadTestPDF.php and changes a follows:
<?php
/*
* Example PHP implementation used for the index.html example
*/
// DataTables PHP library
include( "../lib/DataTables.php" );
// Alias Editor classes so they are easy to use
use
DataTables\Editor,
DataTables\Editor\Field,
DataTables\Editor\Format,
DataTables\Editor\Mjoin,
DataTables\Editor\Options,
DataTables\Editor\Upload,
DataTables\Editor\Validate,
DataTables\Editor\ValidateOptions;
// Build our Editor instance and process the data coming from _POST
Editor::inst( $db, 'users' )
->fields(
Field::inst( 'last_name' ),
Field::inst( 'pdf' )
->setFormatter( Format::ifEmpty( null ) )
->upload( Upload::inst( $_SERVER['DOCUMENT_ROOT'].'/uploads/__ID__.__EXTN__' )
->db( 'files', 'id', array(
'filename' => Upload::DB_FILE_NAME,
'filesize' => Upload::DB_FILE_SIZE,
'web_path' => Upload::DB_WEB_PATH,
'system_path' => Upload::DB_SYSTEM_PATH
) )
->validator( Validate::fileSize( 500000, 'Files must be smaller that 500K' ) )
->validator( Validate::fileExtensions( array( 'pdf' ), "Please upload a PDF file" ) )
)
)
->process( $_POST )
->json();
Now you're ready to test. Load the uploadTest.html and you should see two tables, each with two columns. First table has Last Name and Image columns, second table has Last Name and PDF columns. All good to this point.
Next, select first record in first table, then Edit first table, and upload any image. This is good.
Then, select second record in second table, then Edit second table, and upload any PDF. This works too.
Next, refresh the page. Image and PDF are there. That's good.
Now select the first record in first table, and then Edit first table. Doesn't work. Edit button just shows spinning cursor. I poked around down into DataTables.editor.min.js:105 -- and wrong array of files seems to be there (array from second editor, not first one).
If you refresh the page, select the second record in the second table, and then Edit, everything works okay.
Somewhere along the way, the list of files used for each editor is getting out of synch.
Note, I am using DataTables 1.10.18 and Editor 1.8.1 for both my own application, and for the example that I reproduced above.
Also, I did make the change you outlined in this fix from this issue to editor.php, but the problem still exists for me.
We have a table with ScrollX, ScrollY, FixedHeader and FixedColumn (0) and everything works fine with Chrome (Windows and Android) and with Firefox (Windows) as you can see in the following picture
With Safari on MAC it seems the column width is calculated considering the complete string
IT043FO111‑CSD IT027PG401‑MAR
without taking in account it shall be splitted in two rows
IT043FO111‑CSD
IT027PG401‑MAR
Please refer to the following picture
Thanks for your support