How to put a 'if' query on Ignited datatable? Here is my query:
This is my controller:
function ajaxGetCard() {
$this->load->library('Datatables');
$this->datatables->set_database('retail');
$this->datatables
->select('studEmpID, fullname, serialNumber, balance, If(status = "0", "Enable", "Disabled") as status')
->from('retail_card');
echo $this->datatables->generate();
}
This is my view:
<script type="text/javascript">
$(function() {
$('#example').DataTable( {
"bProcessing": true,
"bserverSide": true,
"ajax": "<?php echo site_url('card/ajaxGetCard'); ?>",
"columns": [
{ "data": "studEmpID" },
{ "data": "fullname" },
{ "data": "serialNumber" },
{ "data": "balance" },
{ "data": "status" },
{ "data": "actions" }
]
} );
});
</script>
<table class="table table-bordered datatable table-striped" id="example">
<thead>
<tr>
<th>ID Number</th>
<th width="30%">Name</th>
<th>Serial</th>
<th>Balance (MYR)</th>
<th>Status</th>
<td>Actions</td>
</tr>
</thead>
When I run this, I've got this error:
DataTables warning: table id=example - Ajax error. For more information about this error, please see http://datatables.net/tn/7
I already refer the given url, but still not solve the problem. If I remove the the 'if' statement in that query, everything works fine. Please help
Related
everything works fine. The only issue that i cannot fix/find is how to create a button and set the value of data: cvpdf inside a href of a button to open the cv
The cvpdf is the file name of a cv stored in the database.
<table id="dtBasicExample" class="table table-striped custom-table mb-0 datatable " >
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>surname</th>
<th>email</th>
<th>position</th>
<th>CV</th>
</tr>
</thead>
<tbody id="atn-tbody">
</tbody>
</table>
function showInformation(str) {
console.log(str);
$("#dtBasicExample").dataTable().fnDestroy();
$(document).ready(function(){
$("#dtBasicExample").dataTable({
scrollX: true,
"ajax":{
url: "data.php?q="+str ,
dataSrc:"",
},
"columns":[
{"data": "id"},
{"data": "name"},
{"data": "surname"},
{"data": "email"},
{"data": "position"},
{"data": "cvpdf"},
]
});
});
};
Let me help you out with this. you can apply this to any column data
columns: [
{
data: function(row){
return `Click This`
}
}
]
the "row" parameter will return the whole data for the current row, so you can access the object through the "row.your_key".
this is the best practice to make your code simpler.
the complete parameter can be accessed through This Link
Hope it can help!
I have a datatable that I would like to initialize with an Ajax call http://url/api/v1/shocks
table.blade.php
<div class="card-body p-0">
<div class="table-responsive">
<table class="table table-striped table-md" id="table-raw-shocks" width="100%" cellspacing="0">
<thead>
<tr>
<th>Record Id</th>
<th>Count</th>
<th>Date</th>
<th>Amplitude 1 (G)</th>
<th>Amplitude 2 (G)</th>
<th>Time 1 (s)</th>
<th>Time 2 (s)</th>
<th>Freq 1 (Hz)</th>
<th>Freq 2 (Hz)</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Record Id</th>
<th>Count</th>
<th>Date</th>
<th>Amplitude 1 (G)</th>
<th>Amplitude 2 (G)</th>
<th>Time 1 (s)</th>
<th>Time 2 (s)</th>
<th>Freq 1 (Hz)</th>
<th>Freq 2 (Hz)</th>
</tr>
</tfoot>
</table>
</div>
</div>
Javascript part
$(document).ready(function () {
initShocksActivityTable();
});
function initShocksActivityTable() {
var url = '{{ route("api:v1:shocks.index") }}'; //http://url/api/v1/shocks
var table = $('#table-raw-shocks-all').DataTable({
responsive: true,
responsive: {
details: {
type: "column",
target: "tr"
}
},
orderCellsTop: true,
fixedHeader: true,
dom: "Bfrtip",
buttons: ["copy", "csv", "excel", "pdf", "print"],
columnDefs: [{
sortable: true
}],
"ajax": url,
"columns": [{
"data": "attributes.record_id"
},
{
"data": "attributes.count"
},
{
"data": "attributes.date_time"
},
{
"data": "attributes.amplitude_1"
},
{
"data": "attributes.amplitude_2"
},
{
"data": "attributes.time_1"
},
{
"data": "attributes.time_2"
},
{
"data": "attributes.freq_1"
},
{
"data": "attributes.freq_2"
},
],
lengthMenu: [
[10, 25, 50, -1],
[10, 25, 50, "All"]
],
iDisplayLength: 10,
order: [
[2, "desc"]
]
});
}
My data looks like this :
Attributes contains all the necessary data that I would like to add on my datatable.
When I do that, I have no data displayed. I suspect that it is because, my data is an array ( [0], 1...)
I tried to add this piece of code (https://datatables.net/reference/option/ajax.dataSrc)
"dataSrc": "data.attributes"
But it still does not work.
I'm sure, it's something that I missed but I have some difficulties to find what is the problem to fetch correctly the data.
Could you please help me on that ? Thank
DataTables warning: table id=user - Cannot reinitialise DataTable. For
more information about this error, please see
http://datatables.net/tn/3
<table id="user" class="table datatable-responsive-row-control">
<thead>
<tr>
<th>Username</th>
<th>Account</th>
<th>data CID</th>
<th>Type</th>
<?php if(!$this->session->userdata('type') == '0') { ?>
<th>Action</th>
<?php } ?>
</tr>
</thead>
<tbody>
</tbody>
</table>
$(document).ready(function () {
$('#user').DataTable({
"processing": true,
"serverSide": true,
"ajax":{
"url": "<?php echo base_url('user/use_data') ?>",
"dataType": "json",
"type": "POST",
},
"columns": [
{ "data": "name" },
{ "data": "accountid" },
{ "data": "dataid" },
{ "data": "type" },
<?php if(!$this->session->userdata('type') == '0') { ?>
{ "data": "actions" },
<?php } ?>
]
});
});
I have got a datatable using Datatables server-side. I have created and filled the table as shown below. Now I need to translate the datatable depending on the language , I found this example in the documentation :
$('#example').DataTable( {
language: {
search: "Search in table:"
}
} );
or loading translation :
$('#example').DataTable( {
language: {
url: '/localisation/fr_FR.json'
}
} );
But none of them works for me ! this is my code :
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>name</th>
<th>adress</th>
</tr>
</thead>
</table>
$(document).ready(function() {
var oTable = $('#example').DataTable({
"processing": true,
"serverSide": true,
"ajax": {
"url": "server-side-process",
},
"columns": [
{ "data": "name" },
{ "data": "adress" },
]
} );
} );
var oTable = $('#example').DataTable({
"language": {"url": "//cdn.datatables.net/plug-ins/1.10.15/i18n/Spanish.json"},
"processing": true,
"serverSide": true,
"ajax": {...
https://datatables.net/plug-ins/i18n/
Below is a working example of two datatables. One using default English and one loading French as per the documentation: https://datatables.net/reference/option/language
JSFiddle link: https://jsfiddle.net/invalidname/mro9h48u/2/
$(document).ready(function() {
var oTable = $('#example').DataTable({
"processing": true,
"serverSide": false,
"ajax": {
"url": "https://run.mocky.io/v3/b99908b5-61f9-4d41-9292-deaa510f3d93",
},
"columns": [
{ "data": "name" },
{ "data": "adress" },
]
} );
} );
$(document).ready(function() {
var oTable = $('#exampleFR').DataTable({
"processing": true,
"serverSide": false,
"ajax": {
"url": "https://run.mocky.io/v3/b99908b5-61f9-4d41-9292-deaa510f3d93",
},
"language": {
"url": "https://cdn.datatables.net/plug-ins/1.10.21/i18n/French.json"
},
"columns": [
{ "data": "name" },
{ "data": "adress" },
]
} );
} );
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<H1>
English table
</H1>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>name</th>
<th>adress</th>
</tr>
</thead>
</table>
<hr>
<hr>
<H1>
French table
</H1>
<table id="exampleFR" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>name</th>
<th>adress</th>
</tr>
</thead>
</table>
Recently, I got a requirement for an implementation of adding Child rows in a table. I have gone through the few APIs and found that datatables fits into my requirement. As of now I am implementing this web application in Springs and getting the data from the controller.
That is $resultSet.
Now this dynamic data I have to render in jsp page. Here I got stucked because I am not able to implement with datatable. I have seen the example of http://datatables.net/examples/api/row_details.html and tried removing Ajax data and used c:foreach loop in place it. But i didn't get any luck.
So can you guys please tell me how do I use datatables with the dyncamic data in order to display child rows.
My main concern is:
$(document).ready(function() {
var table = $('#example').DataTable( {
"ajax": "../ajax/data/objects.txt",
"columns": [
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ "data": "name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "salary" }
],
"order": [[1, 'asc']]
} );
How do I represent the above block.
I tried with <table id="xx"> <c:foreach loop to iterate>
You can use data option to feed data into DataTables directly instead of using server-side script to return data via Ajax. This initialization option can be useful when creating a table from a JavaScript data source, or from a custom Ajax data get. However the data has to be of type Array.
I'm not familiar with Spring framework but I'm assuming you can produce a string with data in JSON format and output it in your page to assign to table_data_json. I'm using a sample JSON string var table_data_json = '[ /* skipped */ ]';.
/* Formatting function for row details - modify as you need */
function format ( d ) {
// `d` is the original data object for the row
return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
'<tr>'+
'<td>Full name:</td>'+
'<td>'+d.name+'</td>'+
'</tr>'+
'<tr>'+
'<td>Extension number:</td>'+
'<td>'+d.extn+'</td>'+
'</tr>'+
'<tr>'+
'<td>Extra info:</td>'+
'<td>And any further details here (images etc)...</td>'+
'</tr>'+
'</table>';
}
$(document).ready(function() {
var table_data_json = '[{"name":"Tiger Nixon","position":"System Architect","salary":"$320,800","start_date":"2011/04/25","office":"Edinburgh","extn":"5421"},{"name":"Garrett Winters","position":"Accountant","salary":"$170,750","start_date":"2011/07/25","office":"Tokyo","extn":"8422"},{"name":"Ashton Cox","position":"Junior Technical Author","salary":"$86,000","start_date":"2009/01/12","office":"San Francisco","extn":"1562"}]';
var table = $('#example').DataTable( {
"data": JSON.parse(table_data_json),
"columns": [
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ "data": "name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "salary" }
],
"order": [[1, 'asc']]
} );
// Add event listener for opening and closing details
$('#example tbody').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = table.row( tr );
if ( row.child.isShown() ) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
row.child( format(row.data()) ).show();
tr.addClass('shown');
}
} );
} );
td.details-control {
background: url('https://raw.githubusercontent.com/DataTables/DataTables/1.10.7/examples/resources/details_open.png') no-repeat center center;
cursor: pointer;
}
tr.shown td.details-control {
background: url('https://raw.githubusercontent.com/DataTables/DataTables/1.10.7/examples/resources/details_close.png') no-repeat center center;
}
<link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<table id="example" class="display">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
If I misunderstood your question, please let me know and I will update my answer.