Good day everyone, I've the following question, how can I show a dynamic image in my table.
This is what I have
My functions.js
tablaSales = $('#tablaSales ').dataTable( {
"aProcessing":true,
"aServerSide":true,
"language": {
"url": "//cdn.datatables.net/plug-ins/1.10.20/i18n/Spanish.json"
},
"ajax":{
"url": " "+base_url+"/Sales/getProductos",
"dataSrc":""
},
"columns":[
{"data":"idproducto"},
{"data":"codigo"},
{"data":"nombre"},
{"data":"stock"},
{"data":"precio"},
{"data":"status"},
{"data":"options"}
],
"columnDefs": [
{ 'className': "textcenter", "targets": [ 3 ] },
{ 'className': "textright", "targets": [ 4 ] },
{ 'className': "textcenter", "targets": [ 5 ] }
],
'dom': 'lBfrtip',
'buttons': [
],
"resonsieve":"true",
"bDestroy": true,
"iDisplayLength": 10,
"order":[[0,"desc"]]
});
sales.php
<table class="table table-hover table-bordered" id="tablaSales">
<thead>
<tr>
<th>ID</th>
<th>Código</th>
<th>Nombre</th>
<th>Stock</th>
<th>Precio</th>
<th>Estado</th>
<th>Acciones</th>
</tr>
</thead>
</table>
Looking at this example, https://www.gyrocode.com/articles/jquery-datatables-card-view/ I want to know how I can modify my JS to bring me the images of my products, working under the MVC model
Related
After passing json_encode variable, not able to loading "sProcessing" text before loading data. I am trying to load more than 50000 records.
Javascript Code
<script>
var data = <?php echo json_encode($data); ?>;
$(document).ready(function() {
$('#datatable').dataTable({
"aaData": data,
"bProcessing": true,
"aoColumns": [
{ "data": "submissions_dt" },
{ "data": "pettycash_dt" },
{ "data": "type" },
{ "data": "description" },
{ "data": "voucher_no" },
{ "data": "amount", className: "right" }
],
"oLanguage": {
"sProcessing": "Fetching Data, Please wait..."
},
order: [[2, 'desc']],
"lengthMenu": [[50, 100, -1], [50, 100, "All"]],
"columnDefs": [
{ "orderable": false, "targets": [0,1,2,3,4,5] },
{"targets": [ 2 ], "visible": false }
]
});
});
</script>
Unable to display the last column in DataTable
THE code works fine, but I'm not sure whats wrong in my code. The last column "DELETE" doesn't show. The code given below. Any help will be highly appreciated..
I'm using DataTable to display my records. The '$title' is the name of the page which is passed inside AJAX to get the required table.
HTML
<div class="container justify-content-center">
<div class="table-responsive-md justify-content-center">
<table id="dataTable" class="table table-striped shadow" style="width:100%">
<thead class="bg-secondary text-white">
<tr>
<th>ID</th>
<th>University</th>
<th>Code</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
</table>
</div>
</div>
JQUERY
$(document).ready(function () {
$title = $(".page-title").text().toLowerCase();
$('#dataTable').DataTable({
responsive: true,
"autoWidth": true,
"searching": true,
"paging": true,
"info": false,
"pagingType": "full_numbers",
"pageLength": 5,
"lengthMenu": [[5, 10, 20, -1], [5, 10, 20, "All"]],
"bLengthChange": false,
"stateSave": true,
"bStateSave": true,
fixedHeader: {
header: true,
footer: false
},
"processing": true,
"serverSide": false,
"ajax": {
"url": "scripts/post.php",
"type": "POST",
"dataType": "json",
"dataSrc": "data",
"data": {
table: "tbl_" + $title
}
},
"rowId": "pk_int_" + $title + "ID",
"columns": [
{"data": "pk_int_" + $title + "ID"},
{"data": "txt_" + $title + "Name"},
{"data": "txt_" + $title + "Code"},
{
"data": null,
"visible": true,
"defaultContent": '<i class="far fa-edit"></i>',
"targets": -1
},
{
"data": null,
"visible": true,
"defaultContent": '<i class="far fa-trash-alt text-danger"></i>',
"targets": -1
}
],
columnDefs: [
{"title": "University Name", "targets": 1},
// {targets: [0, 1, 2, 3, 4], visible: true},
{targets: '_all', visible: true},
{
"targets": 0,
"title": "ID",
"className": "text-left",
"width": "5%"
},
{
"targets": 1,
"className": "text-left",
"width": "50%"
},
{
"targets": 2,
"className": "text-left",
"width": "25%"
},
{
"targets": [3, 4],
"className": "text-center",
"width": "10%",
"visible": true,
"bSortable": false
}
],
language: {
paginate: {
next: '<i class="fas fa-angle-right"></i>',
previous: '<i class="fas fa-angle-left"></i>',
first: '<i class="fas fa-angle-double-left"></i>',
last: '<i class="fas fa-angle-double-right"></i>'
}
}
});
});
JSON
{
"recordsTotal": 5,
"data": [{
"pk_int_universityID": "1",
"txt_universityName": "Not Available",
"txt_universityCode": "NA"
}, {
"pk_int_universityID": "2",
"txt_universityName": "Others",
"txt_universityCode": "Others"
}, {
"pk_int_universityID": "3",
"txt_universityName": "Sultan Qaboos University",
"txt_universityCode": "SQU"
}, {
"pk_int_universityID": "4",
"txt_universityName": "Oman Medical College",
"txt_universityCode": "OMC"
}, {
"pk_int_universityID": "5",
"txt_universityName": "Arabian Gulf University",
"txt_universityCode": "AGU"
}]
}
OUTPUT
Here's my HTML:
<table id="mens-clubs" class="display" cellspacing="0" role="grid" data-page-length="50">
<thead>
<tr>
<th width="0">ID</th>
<th width="20%">Club</th>
<th width="20%">City</th>
<th width="20%">State</th>
<th width="20%">Metro</th>
<th width="20%">Union</th>
</tr>
</thead>
<tfoot>
<tr>
<th width="0">ID</th>
<th width="20%">Club</th>
<th width="20%">City</th>
<th width="20%">State</th>
<th width="20%">Metro</th>
<th width="20%">Union</th>
</tr>
</tfoot>
<tbody></tbody>
</table>
Here's my JS:
$(document).ready(function() {
$('#mens-clubs').DataTable({
'ajax': {
'url': '/my/data/path/src.php',
'dataSrc': 'data'
},
'columns': [
{ 'data': 'id' },
{ 'data': 'clubName' },
{ 'data': 'city' },
{ 'data': 'state' },
{ 'data': 'metroArea' },
{ 'data': 'unionName' }
],
'processing': true,
'dom': '<"row"<"small-24 column"B>><"row"<"large-8 columns"<"row filter-wrapper"<"columns small-24"f>>><"large-16 columns right"p>>' + 't' + '<"row"<"small-24 columns"p>>',
'buttons': [ 'copy', 'excel', 'csv', 'pdf', 'print' ],
'searching': true,
'language': {
'search': '',
'searchPlaceholder': 'Search Clubs'
},
'pagingType': 'full_numbers',
'scrollY': '50vh',
'scrollCollapse': true,
'deferRender': true
});
});
Here are the contents of my src.php file:
{
"data": [{
"id": "3",
"clubName": "Alpha Steelers",
"city": "Alpha",
"state": "UT",
"metroArea": "",
"unionName": "Rocky Mountain"
}, {
"id": "5",
"clubName": "Beta of Aspen",
"city": "Beta",
"state": "CO",
"metroArea": "",
"unionName": "Rocky Mountain"
}, {
"id": "6",
"clubName": "Gamma Highlanders",
"city": "Gamma",
"state": "CO",
"metroArea": "",
"unionName": "Rocky Mountain"
}]
}
My data file is successfully retrieved via GET every time, however, I get this error immediately following it's successful retrieval:
Uncaught TypeError: Cannot read property 'error' of undefined
The line the error references inside DataTables.js is 79406. It is inside the _fnBuildAjax() function and is as follows:
Has anyone ever come across this error or have any idea what this error is referring to? I've run my src.php file through JSONLinter and it is valid. Any help would be greatly appreciated.
Your json feed is missing some info. Jquery will send down a "draw" number and that needs to be fed back. You need the total and filtered as well as the data.
$complete = array("draw" => $this->request->query['draw'],
'recordsTotal' => $total,
"recordsFiltered" => $filtered,
"data" => $output);
I am using jQuery datatable in my php code.
my server server-side processing script here
$columns = array(
array( 'db' => 'val1', 'dt' => 0 ),
array( 'db' => 'val2', 'dt' => 1 ),
);
here problem is that how i get another unbound column val3
which have value of val1+val2 .
Example :
val1 val2 val3
1 2 3
3 5 8
here val1 and val2 is database column and val3 is calculated column.
I am stuck right now that how to add val3 column from server-side script.
Any help is appreciated.
You need to write DB query from server side for getting 3rd column.
Client side keep 3 columns table code (html)
<table class="table results" border="1">
<thead>
<tr>
<th>val1</th>
<th>val2</th>
<th>val3</th>
</tr>
</thead>
</table>
Client side define 3 columns (jquery datatable)
results= $(".results").dataTable({
aLengthMenu: [ [10, 25, 50, 100, 150, "-1"], [10, 25, 50, 100, 150, "All"] ],
iDisplayLength: 10,
searching: true,
"aaSorting": [],
"order": [[ 0, "desc" ]],
"sPaginationType": "full_numbers",
"bProcessing": true,
"serverSide": true,
"bDestroy": true,
"cache": false,
"sAjaxSource": "<?php echo $serverside_php; ?>",
"sDom": 'T<>lfrtip',
"oTableTools": {
"sRowSelect": "os",
"aButtons": [ "select_all", "select_none" ]
},
"aoColumnDefs": [
{ "bSortable": false },
{ "data": "val1" },
{ "data": "val2" },
{ "data": "val3" },
],
});
Feed the server side response data to client datatable + html
I have googled for the answer of this question but noone helped.
I am getting error mentioned in title.
Here is my ajax code :
var table = $('#example').DataTable( {
"ajax": "<?php echo $root; ?>ajax/order.php",
"processing": true,
"serverSide": true,
"ordering": false,
"searching": true,
"columns": [
{ "data": "order_no" },
{ "data": "country" },
{ "data": "name" },
{ "data": "date","className": "align-center" },
{ "data": "subtotal","className": "align-right" },
{ "data": "dileveryAmt","className": "align-right" },
{ "data": "totalAmt","className": "align-right" },
{ "data": "paymentMode","className": "align-center" },
{ "data": "payment","className": "align-center" },
{ "data": null,"defaultContent": "<button id='view' class='btn btn-small btn-info'>View</button><button id='delete' class='btn btn-small btn-danger'>Delete</button>","className": "align-center" }
]
} )
I validated Response from server ( as seen in Developer tools) and its being shown as Valid JSON. But its not reflected in page.
My HTML Code is
<table id="example" class="display table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Order No</th>
<th>Country</th>
<th>Customer</th>
<th>Date</th>
<th>Sub Total</th>
<th>Delivery Charge</th>
<th>Total</th>
<th>Payment Mode</th>
<th>Payment</th>
<th>Action</th>
</tr>
</thead>
UPDATE
Response from Server(there are plenty of entries. I am showing one as example):
"data": [
{
"id": "183",
"customer_id": "183",
"subtotal": "0.00",
"totalAmt": "0.00",
"dileveryAmt": "0.00",
"date": "18/02/2015",
"midnightdelivery": "0",
"delivery_date": "2015-02-19",
"message_on_cake": "",
"special_instruction": "",
"payment": "<div class='label label-warning'>Pending</div>",
"delivery": "0",
"created": "2015-02-18 10:58:29",
"ip": "",
"payment_mode": "",
"first_name": "Ganesh",
"last_name": "Salunkhe",
"email": "g#s.com",
"address": "",
"flat_no": "k",
"building_name": "k",
"street": "k",
"area": "k",
"landmark": "k",
"city": "mumbai",
"country": "India",
"state": "maharashtra",
"contact_no": "7666902899",
"name": "Ganesh Salunkhe",
"order_no": "1181"
},
Any help will be appreciated.
I struggled with this. and after I RTM here https://www.datatables.net/examples/ajax/custom_data_flat.html I figured it out.
ajax: {
url: "data/objects_root_array.txt", <-- notice url and the link
dataSrc: "" <-- if you are just going to json_encode the result from the db. it will handle a flat string
}
ajax calls are done a certain way. not just ajax. but you need to include the url and dataSrc variables in there. After I did that with my code everything worked as it should.
See if this works for you.
var table = $('#example').DataTable( {
"ajax": {
url: "<?php echo $root; ?>ajax/order.php",
dataSrc : ""
},
"processing": true,
"serverSide": true,
"ordering": false,
"searching": true,
"columns": [
{ "data": "order_no" },
{ "data": "country" },
{ "data": "name" },
{ "data": "date","className": "align-center" },
{ "data": "subtotal","className": "align-right" },
{ "data": "dileveryAmt","className": "align-right" },
{ "data": "totalAmt","className": "align-right" },
{ "data": "paymentMode","className": "align-center" },
{ "data": "payment","className": "align-center" },
{ "data": null,"defaultContent": "<button id='view' class='btn btn-small btn-info'>View</button><button id='delete' class='btn btn-small btn-danger'>Delete</button>","className": "align-center" }
]
} )
Think the problem is paymentMode. It is written without underscore in the table definition and with underscore in your json ("payment_mode":)
The answer should look like this:
{
"data": [
{
"id": "183",
"customer_id": "183",
"subtotal": "0.00",
"totalAmt": "0.00",
"dileveryAmt": "0.00",
"date": "18/02/2015",
"midnightdelivery": "0",
"delivery_date": "2015-02-19",
"message_on_cake": "",
"special_instruction": "",
"payment": "<div class='label label-warning'>Pending</div>",
"delivery": "0",
"created": "2015-02-18 10:58:29",
"ip": "",
"payment_mode": "",
"first_name": "Ganesh",
"last_name": "Salunkhe",
"email": "g#s.com",
"address": "",
"flat_no": "k",
"building_name": "k",
"street": "k",
"area": "k",
"landmark": "k",
"city": "mumbai",
"country": "India",
"state": "maharashtra",
"contact_no": "7666902899",
"name": "Ganesh Salunkhe",
"order_no": "1181"
}
]
}
Look at here: http://json.parser.online.fr/