how can i display data comming from ajax call to check if receive what i expect ?
display data
↧
↧
display json data from ajax request
how can i display data comming from ajax call to check if i receive what i expected?
$('#myTable').DataTable( {
ajax: '/api/myData'
} )
↧
The fixed header piece does not work at all in your example pages
I'm wondering what is the time frame on getting that up and running? I've used Chrome and IE and have the same results when viewing on your Website.
Thank you!
↧
Print export and column selector with ':not' shift column classes
I think I've found a bug when using the print button with the export options set to exclude certain columns via a column-selector like ':not(<class>)'.
Reproduced in JSBin here: http://live.datatables.net/mamepafu/1/edit?html,css,js,output .
First column (Name) has a noExport class applied which sets color to red.
When printing, columns with class noExport are ignored by setting the exportOptions.column: ':not(.noExport)'.
First column is correctly missing, but the class noExport is now applied to the Surname column.
↧
Server Side Processing.. add in custom column?
So I'm using server side processing as the data source for my datatable.
Let's say I have a file called transactions.html, somwhere in it is where I initialize my data table, like so:
var table = $('#transactions').DataTable({
"processing": true,
"serverSide": true,
"ajax": {
url: "transactionsdata.php", // json datasource
data: {action: 'getTransactions', currentpage: '<?=$currentpage?>'},
type: 'post'
});
That works wonderfully, but I'm wondering how I can throw in a custom column in addition to my existing columns. I want to use PHP to check if the user has admin access (I already can do that), and if so, then they will have a column added to the end which allows them to delete the row from the database.
I'm already currently doing that on the PHP file that is the data source (transactionsdata.php in my example), but I feel like that's not the 'right' way to do it, as I'd like to not have any front end dependencies in that JSON file/string. So I just need some help understanding how I can add a column in (perhaps when initializing the table) and populate it with whatever.
I couldn't find any example where custom columns were added via JS/jquery on the calling page's side (i.e. from transaction.html, in my above example). Is this possible without a lot of work?
↧
↧
Conditional Row Background
So I'm using the following to set the background row of a table that has the followiing bootstrap classes applied.
class="table table-striped table-bordered table-responsive"
This seems to work only on the even rows. Any ideas why?
createdRow: function(row, data, dataIndex) {
if (data.name.trim() == 'BODYPUMP') {
$(row).css({"background-color":"red"});
$(row).addClass('sub-needed');
}
}
↧
href link in td of datatable when server-side processing
First of all, I am a beginner in coding......
I have a datatable (server-side processing) with a large number of rows....
Now, I want to add href link in td of all the tr
<a href="more_log.php?more=<?php echo $row['id']?>" class="glyphicon-plus-sign btn-success btn-block" >Add</a></td>
here $row['id'] is the first column/td in the datatable
Please help me in adding href linkin td/column of my datatable.
Code for the datatable server side is as follows
index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css"/>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
</head>
<body>
<h1>Data Source : Server-Side processing using PHP&MySQL and Ajax</h1>
<table cellpadding="1" cellspacing="1" id="users" class="display" width="100%">
<thead>
<tr>
<th>ID</th>
<th>NAME</th>
<th>No</th>
<th>Rack</th>
<th>PID</th>
<th>PID</th>
</tr>
</thead>
<tfoot>
<tr>
<th>ID</th>
<th>NAME</th>
<th>No</th>
<th>Rack</th>
<th>PID</th>
<th>PID</th>
</tr>
</tfoot>
</table>
<script type="text/javascript">
$(document).ready(function () {
$('#users').DataTable({
"columns": [
{"data": "id"},
{"data": "name"},
{"data": "no"},
{"data": "rackno"},
{"data": "pid"},
{"data": "pid"}
],
"processing": true,
"serverSide": true,
"ajax": {
url: 'demo2.php',
type: 'POST'
}
});
});
</script>
</body>
</html>
demo2.php
<?php
/* IF Query comes from DataTables do the following */
if (!empty($_POST) ) {
/*
* Database Configuration and Connection using mysqli
*/
define("HOST", "localhost");
define("USER", "root");
define("PASSWORD", "root123");
define("DB", "test");
define("MyTable", "well");
$connection = mysqli_connect(HOST, USER, PASSWORD, DB) OR DIE("Impossible to access to DB : " . mysqli_connect_error());
/* END DB Config and connection */
/*
* @param (string) SQL Query
* @return multidim array containing data array(array('column1'=>value2,'column2'=>value2...))
*
*/
function getData($sql){
global $connection ;//we use connection already opened
$query = mysqli_query($connection, $sql) OR DIE ("Can't get Data from DB , check your SQL Query " );
$data = array();
foreach ($query as $row ) {
$data[] = $row ;
}
return $data;
}
/* Useful $_POST Variables coming from the plugin */
$draw = $_POST["draw"];//counter used by DataTables to ensure that the Ajax returns from server-side processing requests are drawn in sequence by DataTables
$orderByColumnIndex = $_POST['order'][0]['column'];// index of the sorting column (0 index based - i.e. 0 is the first record)
$orderBy = $_POST['columns'][$orderByColumnIndex]['data'];//Get name of the sorting column from its index
$orderType = $_POST['order'][0]['dir']; // ASC or DESC
$start = $_POST["start"];//Paging first record indicator.
$length = $_POST['length'];//Number of records that the table can display in the current draw
/* END of POST variables */
$recordsTotal = count(getData("SELECT * FROM ".MyTable));
/* SEARCH CASE : Filtered data */
if(!empty($_POST['search']['value'])){
/* WHERE Clause for searching */
for($i=0 ; $i<count($_POST['columns']);$i++){
$column = $_POST['columns'][$i]['data'];//we get the name of each column using its index from POST request
$where[]="$column like '%".$_POST['search']['value']."%'";
}
$where = "WHERE ".implode(" OR " , $where);// id like '%searchValue%' or name like '%searchValue%' ....
/* End WHERE */
$sql = sprintf("SELECT * FROM %s %s", MyTable , $where);//Search query without limit clause (No pagination)
$recordsFiltered = count(getData($sql));//Count of search result
/* SQL Query for search with limit and orderBy clauses*/
$sql = sprintf("SELECT * FROM %s %s ORDER BY %s %s limit %d , %d ", MyTable , $where ,$orderBy, $orderType ,$start,$length );
$data = getData($sql);
}
/* END SEARCH */
else {
$sql = sprintf("SELECT * FROM %s ORDER BY %s %s limit %d , %d ", MyTable ,$orderBy,$orderType ,$start , $length);
$data = getData($sql);
$recordsFiltered = $recordsTotal;
}
/* Response to client before JSON encoding */
$response = array(
"draw" => intval($draw),
"recordsTotal" => $recordsTotal,
"recordsFiltered" => $recordsFiltered,
"data" => $data
);
echo json_encode($response);
} else {
echo "NO POST Query from DataTable";
}
?>
↧
How to perform the speed for ajax source with 15.000 rows ?
I send the data via ajax source from server, which contains about 15.000 datarows.
Therefor I use the following code:
var otable = $('#datatable_fixed_column').DataTable({
"order": [[ 0, "DESC" ]],
"bStateSave": true, // saves sort state using localStorage
"sDom": "<'dt-toolbar'<'col-xs-12 col-sm-6 hidden-xs'f><'col-sm-6 col-xs-12 hidden-xs'<'toolbar'>>r>"+
"t"+
"<'dt-toolbar-footer'<'col-sm-4 hidden-xs'i><'col-sm-4 col-xs-6'l><'col-xs-6 col-sm-4'p>>",
"autoWidth" : false,
"deferRender": true,
"stateSave": true,
"stateSaveParams": function (settings, data) {
data.search.search = "";
data.columns.forEach(function(data){data.search.search = "";})
},
"ajax": "{{ path('CustomerData') }}",
"dataType": "json",
"processing": true,
"serverSide": false,
"cache": true,
columns: [
{ data: 'id' },
{ data: 'customer_code','width': '70px','render':function (data, type, row) {return (data === null) ? '':data; } },
{ data: 'company_name' },
{ data: 'salutation','width': '50px','render':function (data, type, row) {switch (data) {case 'm': return "{{ 'form.salutation.male'|trans({},'FOSUserBundle') }}"; case 'f': return "{{ 'form.salutation.female'|trans({}, 'FOSUserBundle') }}";}}} ,
{ data: 'first_name' },
{ data: 'last_name' },
{ data: 'email','render':function (data, type, row) {return '<a href="mailto:'+ data +'">'+data+'</a>' }},
{ data: 'telephone','width': '140px','type': 'telephone' },
{ data: 'enabled','render':function(data){return (data === true)? '<span class="label bg-color-green">aktiv</span>': '<span class="label bg-color-red">gesperrt</span>'}}
],
// stateSave: true,
"language": {
"lengthMenu": "{{ 'datatable.lengthMenu'|trans }}",
"zeroRecords": "{{ 'datatable.nothing_found'|trans }}",
"info": "{{ 'datatable.showing_per_page'|trans }}",
"infoEmpty": "{{ 'datatable.no_record'|trans }}",
"infoFiltered": "{{ 'datatable.info_filtered'|trans }}",
"sSearch": "",
"searchPlaceholder": "{{ 'datatable.search'|trans }}",
"oPaginate": {
"sFirst": "{{ 'datatable.sFirst'|trans }}",
"sPrevious": "{{ 'datatable.sPrevious'|trans }}",
"sNext": "{{ 'datatable.sNext'|trans }}",
"sLast": "{{ 'datatable.sLast'|trans }}"
},
"sProcessing": "{{ 'datatable.is_loading'|trans }}",
}
});
$.fn.dataTable.ext.type.search.telephone = function ( data ) {
return ! data ?
'' :
typeof data === 'string' ?
data + data.replace(/[ \-]/g, '') :
data;
};
$.fn.dataTable.ext.errMode = 'none';
$.extend(true, $.fn.dataTable.defaults, {
mark: true
});
Is there a way to speed it up ?
Loading time is (depends on the Computer) 2-5 Seconds.
↧
Column Search (Select Inputs) doesn't work with scrollX: true
Hi Everyone,
I have an issue with my column search via select Inputs. When I enable scrollX, my search fields are under my Header. but I really don't know why. can you guys help me out?
Here is a test case: http://live.datatables.net/ruyezofa/4/edit
Cheeres,
Mert
↧
↧
columns.render with condition
"services": [{
"id": "1",
"nom": "Garde-Malade"
}, {
"id": "2",
"nom": "Soins infirmiers",
"actif": true
}, {
"id": "3",
"nom": "P\u00e9dicure M\u00e9dicale"
}, {
"id": "4",
"nom": "je ne sais plus"
}],
i have this in my colums initialisation table
{
"data": "services",
"render": "[, ].nom"
},
when i execuse my application it create a comma separated list like this:
Garde-Malade, Soins infirmiers, Pédicure Médicale, je ne sais plus
how can iapply condition on "render": "[, ].nom" to obtain only the one with "actif": true?. i mean to obtain only Soins infirmiers
thank for your help!
↧
How to set ordering and pagination false for datatables having bServerSide true?
I have datatable whos bServerSide is set to true, but when its true while pagination it send back end call and get 10 records, on next page it again send back end call and fetch next records. Also when I set bServerSide true, I had to do server side sorting , I want to sorting on UI. I want datable to call ajax request but pagination and sort should be done on UI .
How to implement that?
↧
Multiple Tables with AJAX / JSON feed
Hi all together,
I checked the following example to see how to use multiple tables with the same configuration: https://datatables.net/examples/basic_init/multiple_tables.html
So far so good - but I feed my table content via AJAX (JSON). This data feed is part of the configuration:
"ajax": "sql/json.php",
It is possible to use multiple tables with the same configuration and also feed the table contents with the above mentioned way?
Maybe I have to say that I'd like to move the multiple tables in a jQueryUI Tabs structure and I'd also like to load the tables contents only when clicked on the jQueryUI tab. I don't know if that will affect the use of multiple tables in datatables, but maybe good to know anyway.
Thank you for your help!
↧
how To add Data in child rows ?
Hello
i want help me
I want Add data in child rows from Sheets data
A-1 Parent rows
A- 2 Child rows
My code :
http://live.datatables.net/baholofi/1/edit?html,css,js,output
I want
Thanks !
↧
↧
Refresh datatable without using ajax
Hi all
I'm trying without great success to refresh the content of a datatable without using ajax - using a button.
Data itself is being presented from an SQL query directly on the page.
When the pages opens, data appears as expected.
But when I change the data within the db, then click the reload button, the onClick event (below) does fire, and the table is cleared successfully, but then the table isn't refreshed/reloaded/redrawn at all - remains empty/cleared.
$('#btn-reload').on('click', function(){
table
.clear()
.draw()
});
Any ideas would be massively appreciated. Many thanks in advance.
↧
Complex Join Query
I'm attempting the following join but getting an error. Bit stuck and appreciate any ideas on where I'm going wrong.
// Build our Editor instance and process the data coming from _POST
Editor::inst( $db, 'mtp_event_schedule_speakers', 'speaker_id' )
->fields(
Field::inst( 'mtp_event_schedule_speakers.speaker_profile_id' ),
Field::inst( 'mtp_event_schedule_speakers.speaker_name' ),
Field::inst( 'mtp_event_schedule_speakers.speaker_bio_small' ),
Field::inst( 'mtp_event_schedule_speakers.speaker_bio_large' ),
Field::inst( 'mtp_event_schedule_speakers.speaker_avatar' ),
Field::inst( 'mtp_event_schedule_speakers.speaker_id' )->setValue( $day_id )
)
->leftJoin( 'mtp_event_schedule_day_meta as meta',
'mtp_event_schedule_speakers.speaker_id', '=',
'meta.meta_value AND
(meta.meta_key = "speaker_id")'
)
->where('mtp_event_schedule_day_meta.meta_value', $speaker_id )
->debug(true)
->process( $_POST )
->json();
I've referenced here: https://datatables.net/forums/discussion/comment/81166/#Comment_81166
error: DataTables warning: table id=mtp_event_schedule_speakers - An SQL error occurred: SQLSTATE[42000]: Syntax error or access violation: 1064 You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near '' at line 1
Thanks!
↧
How to manage stateSave value when we change the table?
Hi,
How to manage stateSave value when the table get changed?
I'm wondering what will be the best approach in the case we have stateSave values for a table
and the table get changed if we add, remove a column or change column order ....
Because when doing this datatables will throw an error if we don't clear the stateSave values...
Does the only available method is to clear the stateSave values?
As it is not easy to parse the stateSave value so I'm out of idea...
↧
How to use one column value in another column for hyperlink?
The primary key for Projects is the id.
Users need to be able to select a single project.
I want to use the project name as the link, but send the project id in the URL.
The link in the data: 'id' column works correctly.
In the code below, I need to replace
" [here I want to insert the 'id' value]"
with something like
data: 'id'
but I don't know the syntax.
Does anyone know how to work this? Thanks
var table = $('#example').DataTable( {
dom: 'Bfrtip',
ajax: {
url: '/index.php/Ajax/Projects',
type: "POST"
},
columns: [
{ data: 'id',
render: function ( data, type, row, meta ) {
return '<a href=/index.php/Project/viewSingleProject/' + data + '>'+data+'</a>';
}
},
{ data: 'projectname',
render: function ( data, type, row, meta ) {
return '<a href=/index.php/Project/viewSingleProject/ [here I want to insert the 'id' value]>'+data+'</a>';
}
},
↧
↧
Rows invalidate 'dom' error
I'm trying to invalidate my datatable rows, but for some reason it is giving me following error:
Uncaught TypeError: Cannot read property 'length' of null
at Ha (jquery.dataTables.min.js:23)
at ca (jquery.dataTables.min.js:22)
at s.<anonymous> (jquery.dataTables.min.js:113)
at s.iterator (jquery.dataTables.min.js:100)
at s.<anonymous> (jquery.dataTables.min.js:113)
at s.invalidate (jquery.dataTables.min.js:102)
at HTMLInputElement.<anonymous> ((index):1108)
at HTMLTableElement.dispatch (jquery-1.12.4.js:5226)
at HTMLTableElement.elemData.handle (jquery-1.12.4.js:4878)
There is row invalidation trigger function:
$('#oDataTable').on('change', ':checkbox.trik', function(e) {
var row = $(this).closest('tr');
var tery1 = row.find('input:checkbox:checked').length;
var kluj = parseInt(tery1);
var cell = $(this).closest('td.counter');
row.find('td.counter').text(kluj);
t.rows().invalidate('dom')
});
First 5 lines of it are calculating checkboxes checked in desired row and then putting counter of them into row cell - it's working good.
But problem is with DOM invalidation - I'm calling it because after adding my counter to table, Its unable to sort datatable column by these dynamic added counter values.
When I'm just using 'invalidate()' there is no error but sorting wont work.
There is also my datatable setup:
var t = $('#oDataTable').DataTable({
"lengthMenu": [
[25, 50, 100, 150, 200, -1],
[25, 50, 100, 150, 200, "All"]
],
dom: 'Blfrtip',
buttons: [{extend: 'colvis', collectionLayout: 'fixed four-column', text: 'Select columns', columnText: function ( dt, idx, title ) { return idx+": <b>"+title+"</b>"; } }, { extend: 'excelHtml5', exportOptions: { columns: [ 12,13,17,45 ] } } ], select: { style: 'multi+shift' }, "paging": true, "colReorder": true, "fixedHeader": true, "pageLength": 25, 'ajax': { 'type': 'POST', 'url': '/populatedt }, "deferRender": true, 'columns': [ { "className": 'details-control doop', "orderable": false, "data": null, "defaultContent": '' }, // THERE ARE OTHER COLUMNS AND THEM DATA REFERENCE TO MY AJAX ], "columnDefs": [ { targets: [1,2,3,4,5,6,7,8,9,10,11], orderDataType: 'dom-checkbox' }, ], });
↧
Why do I have to start search with capitol letter?
I am using server-side processing taken from this example: https://datatables.net/examples/data_sources/server_side.html
I want to be able to search on several words. The problem is that I have to start the search with capitol letter. I have several columns with e.g. "Terje Olsen" and "2011-666". Now I can search for "-666 terje" but returns nothing if I don't use "-666 terje" (with T). I have turned of "serverSide": true, so then I can search multiple words. But still I have to use correct letters for text. "Terje" and not "terje". Why is this
var table = $('#example').DataTable( {
language: {url: '//cdn.datatables.net/plug-ins/1.10.19/i18n/Norwegian-Bokmal.json'},
"processing": true,
// "serverSide": true,
"ajax": "/code/server_processing.php",
"columns": [
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": '',
"render": function () {
return '<i class="fas fa-plus-circle" aria-hidden="true"></i>';
},
width:'10px'
},
{ "data": 1 },
{ "data": 5 },
{ "data": 9 }
],
"order": [[1, 'asc']],
"rowCallback": function( row, data, index ) {
if ( typeof data[13] !== "undefined" ) {
$(row).addClass('gul');
}
}
} );
↧
preEdit and multiple editing
Hi Allan.
I suspect that this post
https://datatables.net/forums/discussion/39926
may be related to a recent problem of mine, whereby preEdit passes values to a function which creates a new field and gives it a composite value. Multiple editing always only uses the result of the first composite created.
Was there any further action in that thread?
↧
More Pages to Explore .....
