I have a datatable like this
What I want is to get the latest notes with the corresponding shipment_id (the topmost notes) when clicking the copy summary report button above and paste it to some text editors for email template. But what I get is
Hi,
Below are the updates on the reimbursement requests for 3 shipment/s:
//first row
FBA15MQMW8BB: 23-Feb-21 06:08,PM Super Updated
23-Feb-21 06:06 PM :New Notes (updated) ----> not included
23-Feb-21 06:06 PM Invoice and BOL ----> not included
//2nd row
FBA15TX03JTX: 23-Feb-21 07:01 PM,Latest
23-Feb-21 07:01 PM New Notesss ----> not included
//3rd row
FBA15M1SQ8VH: 23-Feb-21 07:01 PM, Invoice and BOL
Will be sending updates again once I have additional information.
Thank you.
what i tried is
Swal.fire({
title: '<h2>Email Template copied to clipboard!</h2>',
icon: 'info',
html: '<p>You can now paste them anywhere completely.</p>',
confirmButtonText: 'Send Updates',
showCancelButton: true,
showCloseButton: true,
showLoaderOnConfirm: true,
preConfirm: (confirm) => {
var str='';
var emailBody='';
var count_shipments = $(".data-row").length;
var SearchFieldsTable = $("#tbl-inbound-shipments-in-progress tbody");
var trows = SearchFieldsTable.children(".data-row");
$.each(trows, function (index, row) {
var shipment_id=$(row).attr("data-shipment-id");
var notes = $(row).attr("data-notes");
//this is the code for copying the notes
str += shipment_id + ": " + (notes ? notes : "No notes") + "\n\n";
});
//the email body/template to be pasted
emailBody = 'Hi, \n\nBelow are the updates on the reimbursement requests for '+ count_shipments +' shipment/s: \n\n' + str +
'Will be sending updates again once I have additional information.\n\nThank you.'
var el = document.createElement('textarea');
el.value = emailBody;
el.setAttribute('readonly', '');
el.style = {position: 'absolute', left: '-9999px'};
document.body.appendChild(el);
el.select();
document.execCommand('copy');
document.body.removeChild(el);
},
EDIT: table structure and data fetch included as requested
<table class="table table-bordered table-striped table-hover display compact" id="tbl-inbound-shipments-in-progress" style="width:100%">
<thead class="text-primary">
<tr>
<th>#</th>
<th>{{ __('Client') }}</th>
<th>{{ __('SHIPMENT ID') }}</th>
<th>{{ __('Case ID') }}</th>
{{-- <th>{{ __('P/A/R') }}</th> --}}
<th>{{ __('Updated Date') }}</th>
<th>{{ __('Maturity') }}</th>
<th>{{ __('Action') }}</th>
</tr>
</thead>
</table>
table data
function load_inbound_shipment_in_progress() {
window.ISIP = $('#tbl-inbound-shipments-in-progress').DataTable({
//processing: true,
serverSide: true,
"fnInitComplete": function (oSettings, json) {
toastr.options.progressBar = true;
// toastr.info('Requested Inbound Shipment data is now loaded.');
$('#loading').hide();
},
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
iDisplayLength: 10,
ajax: "{{ route('admin.clients.inbound-shipment-in-progress', ['client'=>$client->id]) }}",
createdRow: function( row, data, dataIndex ) {
var red = ((data.maturity > 5) && (data.pending > 0)) ? 'bg-danger' : '',
notes = (data.notes!='') ? data.notes : '',
shipment_id = (data.shipment_id_nolink !='') ? data.shipment_id_nolink : '';
$(row).attr('data-row_id', data.id).attr('data-notes', notes).attr('data-shipment-id', shipment_id).attr('data-case_id', data.case_id).attr('data-pending', data.pending).attr('data-shipment_id', data.shipment_id).addClass(red);
$(row).addClass('data-row');
},
dom: 'lBfrtip<"actions">',
buttons: [
{
extend: 'copy',
className: 'btn btn-custom-summary',
text: 'Copy Summary Report',
action: function ( e, dt, node, config ) {
copyEmail();
}
}
],
columns: [
{ data: 'notes', name: 'notes', "class": "text-nowrap text-center", render: function(data) { return ''; }, fnCreatedCell: function (nTd, sData, oData, iRow, iCol) {
if (oData.notes != '') $(nTd).addClass('details-control');
}, orderable: false
},
{ data: 'client', name: 'client', "class": "text-nowrap text-center" },
{ data: 'shipment_id', name: 'shipment_id', "class": "text-nowrap text-center" },
{ data: 'case_id', name: 'case_id', "class": "text-nowrap text-center", render: function(data, type, full) {
console.log(this)
var link = ''+(data )+'';
return '<span class="link-mode-'+full.id+'">' + link + '</span><input style="display: none;" id="edit-mode" class="edit-mode-'+full.id+'" type="text" value="'+ data +'">' + ' <button onclick="popup_save_case_id(this)" id="edit-case-id" class="btn btn-primary btn-xs"> <i class="fas fa-edit"></i> Edit<input type="hidden" class="case_id" value="'+data+'"> </button>';
}},
// { data: 'p_a_r', name: 'p_a_r', "class": "text-nowrap text-center" },
{ data: 'updated_at', name: 'updated_at', "class": "text-nowrap text-center" },
{ data: 'maturity', name: 'maturity', "class": "text-nowrap text-center" },
{ data: 'action', name: 'action', "class": "text-nowrap text-center bg-light", orderable: false, searchable: false }
]
});
}
I have a datatable that fetches records from database with ajax. I want to add the edit tooltip like jquery-datatables-editor extension to datatables but for free. Is there any plugin to do this? if not, can any one help me to do this manually?
This is my JavaScript code:
$('#table_id').DataTable({
"serverSide": true,
"processing": true,
"ajax": function (data, callback, settings) {
$.ajax({
url: '/some url',
type: 'GET',
data: data,
success: function (data) {
console.log(data)
}
});
},
"columns": [{
"title": "edit",
"data": null,
"className": "center",
"defaultContent": ' Edit / Delete '
}, {
"title": "name",
"data": "name"
}, {
"title": "id",
"data": "id"
},
]
});
Since your question (and posted code sample) are mostly concerned with front-end part of editable rows feature I will focus on that primarily as backend logic is pretty much straightforward (update/insert data into storage upon AJAX-request receipt).
In order to implement that feature following logic I may suggest:
append (by means of createdRow option) some anchor (row().index() or source object id property, etc) to your source data within some <tr> attribute (e.g. rowindex), so you will know later on which entry to modify server-side:
$('table').DataTable({
...
createdRow: (tr, _, rowIndex) => $(tr).attr('rowindex', rowIndex)
})
append some anchor attribute (e.g. data-src) to your editor pop-up (I'll use bootstrap-4 modal for that purpose) <input> nodes to link those input fields to corresponding source object properties:
<div><label>PropertyX:</label><input data-src="propertyX"></input></div>
upon clicking edit button, grab corresponding row data, populate editor pop-up <input> fields with that data, pass anchor to edited row (rowindex attribute value) over to pop-up attribute:
//for table id 'example' handle clicking
//edit button having class 'edit'
$('#example').on('click', '.edit', function () {
//get clicked row invoking row() API method
//against DataTables object assigned to dataTable
const rowClicked = dataTable.row($(this).closest('tr'));
//populate edit form with row data by corresponding
//rowClicked property based on 'data-src' attribute
$.each($('#editform input'), function () {
$(this).val(rowClicked.data()[$(this).attr('data-src')]);
});
//set modal attribute rowindex to corresponding row index
$('#editform').attr('rowindex', rowClicked.index());
//open up edit form modal
$('#editform').modal('toggle');
});
upon completing row data editing, store <input> values into object:
const modifiedData = {};
$.each($('#editform input'), function(){
Object.assign(modifiedData, {[$(this).attr('data-src')]:$(this).val()});
});
POST data (along with corresponding rowindex) to the server and reload (ajax.reload()) up-to-date datatable upon success:
$.ajax({
url: '/editrow',
method: 'POST',
data: {id: $('#editform').attr('rowindex'), ...modifiedData},
success: () => {
$('#editform').modal('hide');
dataTable.ajax.reload();
}
});
Complete live demo of that method you might examine in your browser's DevTools by the following link with some bonus in form of row delete button.
Both HTML and jQuery code sample might look as follows (not executable as there's no supporting backend):
$(document).ready(() => {
//data table initialization
const dataTable = $('#example').DataTable({
ajax: {
url: '/getdata',
type: 'GET',
dataSrc: ''
},
dom: 't',
//use <tr> attribute 'rowindex' to anchor to source data row index
createdRow: (tr, _, rowIndex) => $(tr).attr('rowindex', rowIndex),
columns: [
{data: 'name', title: 'Name'},
//append 'Edit'/'Delete' buttons to the rightmost edge of the cell
{data: 'title', title: 'Title', render: (cellData, _, __, meta) => cellData+'<i class="delete fa fa-trash"></i><i class="edit fa fa-pencil"></i></button>'}
],
});
//delete button handler
$('#example').on('click', '.delete', function() {
//extract the index of the row to delete
//from 'rowindex' attribute
const rowIndex = $(this)
.closest('tr')
.attr('rowindex');
//do AJAX-call to the backend
$.ajax({
url: '/deleterow',
method: 'DELETE',
data: {id: rowIndex},
//re-draw datatable with up to date data
success: () => dataTable.ajax.reload()
});
});
//edit button handler (open up edit form modal)
$('#example').on('click', '.edit', function(){
//get clicked row
const rowClicked = dataTable.row($(this).closest('tr'));
//populate edit form with row data by corresponding
//rowClicked property based on 'data-src' attribute
$.each($('#editform input'), function(){
$(this).val(rowClicked.data()[$(this).attr('data-src')]);
});
//set modal attribute rowindex to corresponding row index
$('#editform').attr('rowindex', rowClicked.index());
//open up edit form modal
$('#editform').modal('toggle');
});
//submit edits handler
$('#editform').on('click', '#submitedits', function(){
//grab modified data into object
const modifiedData = {};
$.each($('#editform input'), function(){
Object.assign(modifiedData, {[$(this).attr('data-src')]:$(this).val()});
});
//send modified data to the backend
$.ajax({
url: '/editrow',
method: 'POST',
data: {id: $('#editform').attr('rowindex'), ...modifiedData},
success: () => {
//close the modal
$('#editform').modal('hide');
//re-draw datatable
dataTable.ajax.reload();
}
});
});
});
<!doctype html>
<html>
<head>
<script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="application/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://use.fontawesome.com/937a319e2f.js"></script>
<script type="application/javascript" src="/main.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/main.css">
</head>
<body>
<!-- Table -->
<table id="example"></table>
<!-- Modal -->
<div class="modal fade" id="editform" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Row details</h5>
</div>
<div class="modal-body">
<form>
<div class="form-group"><label>Name:</label><input data-src="name" class="form-control"></input></div>
<div class="form-group"><label>Title:</label><input data-src="title" class="form-control"></input></div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-dark" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-outline-dark" id="submitedits">Save changes</button>
</div>
</div>
</div>
</div>
</body>
</html>
If you mean JQUERY DATATABLE then you can insert input fields (that would still retain the cell data) for every column within your table row as you desire and set the borders of the input field to not display, with css.
EXAMPLE TABLE
<style>
.no-input-border {
border: 'none' !important; background: 'none' !important;
}
</style>
<table id="dynamic_table">
<thead>
<tr>
<th>Name</th>
<th>State</th>
<th>Address</th>
<th>Active</th>
<th>Action</th> <!-- This column would hold your buttons -->
</tr>
</thead>
<tbody>
</tbody>
</table>
EXAMPLE DATATABLE INITIALIZATION
var table = $('#dynamic_table').DataTable({
"order":[[ 0, 'asc' ]], // order by first column
"processing": true,
'paging': true,
'searching': true,
'retrieve': true,
'serverSide': true,
'ajax': {
'url': "your-ajax-url",
'type': 'POST'
},
'columns': [ //every **name:** value must be present in your json
{ data: null, name: 'name'},
{ data: null, name: 'state' },
{ data: null, name: 'address' },
{ data: null, name: 'active' },
{ data: null, name: 'id' } // column that holds your buttons
],
"columnDefs": [
{
"targets": 0, // column that inserts an input field
"data": 'name',
"orderable": false,
"createdCell": function (td, cellData, rowData, row, col){
return '<input type="text" class="no-input-border" name="name" value="'+cellData+'" />'
}
},
{
"targets": 1, // column that inserts an input field
"data": 'state',
"orderable": false,
"createdCell": function (td, cellData, rowData, row, col){
return '<input type="text" class="no-input-border" name="state" value="'+cellData+'" />'
}
},
{
"targets": 2, // column that inserts an input field
"data": 'address',
"orderable": false,
"createdCell": function (td, cellData, rowData, row, col){
return '<input type="text" class="no-input-border" name="state" value="'+cellData+'" />'
}
},
{
"targets": 3, // column that inserts an input field
"data": 'active',
"orderable": false,
"createdCell": function (td, cellData, rowData, row, col){
return '<input type="text" class="no-input-border" name="active" value="'+cellData+'" />'
}
},
{
"targets": 4, // column that holds your buttons
"data": 'id',
"orderable": false,
"createdCell": function (td, cellData, rowData, row, col){
return '<button class="edit_row">Edit<button>'
}
}
],
'responsive': true,
'initComplete': function(settings, json) {
//Run a function when table first initializes
},
'drawCallback': function( settings ) {
//Run a function anytime table reloads when paginating
}
});
EXAMPLE DATATABLE ROW EDIT FUNCTION
$('#dynamic_table tbody').on('click', '.edit_row', function () {
var row = table.row( $(this).parents('tr') ); // row that was clicked
var d = row.data(); // data of the row button that was clicked .eg. console.log(d.name)
var index = row.index();
var json = { // json to be sent
id: d.id,
name: table.cell(index,0).nodes().to$().find('input').val(),
state: table.cell(index,1).nodes().to$().find('input').val(),
address: table.cell(index,2).nodes().to$().find('input').val(),
active: table.cell(index,3).nodes().to$().find('input').val()
}
/*Your Ajax Function Here*/
});
RELOAD DATATABLE FUNCTION
table.ajax.reload( function ( json ) {
//Run function after table reloads
});
You can create a custom button in datatable. You can go to this documentation to know how it works. Now in the action you can call some function inside it when the user click it the button will call the function in javascript and do what you want inside it.
Here's example code.
$('#table_id').DataTable({
"serverSide": true,
"processing": true,
"ajax": function (data, callback, settings) {
$.ajax({
url: '/some url',
type: 'GET',
data: data,
success: function (data) {
console.log(data)
}
});
},
buttons: [
{ text: 'Add', name: 'btnAdd', action: function ( e, dt, node, config ) {
$.fn.addfunction();
}},
{ extend: 'selected', text: 'Edit', name: 'btnEdit', action: function ( e, dt, node, config ) {
$.fn.editfunction();
}},
{ extend: 'selected', text: 'Delete', name: 'btnDelete', action: function ( e, dt, node, config ) {
$.fn.deletefunction();
}},
],
"columns": [{
"title": "edit",
"data": null,
"className": "center",
"defaultContent": ' Edit / Delete '
}, {
"title": "name",
"data": "name"
}, {
"title": "id",
"data": "id"
},
]
});
$.fn.addfunction = function(){
//Your code here
}
$.fn.editfunction = function(){
//Your code here
}
$.fn.deletefunction = function(){
//Your code here
}
I added the idea of this document from datatables that create custom button and create and call function in jquery
There's also other way by using and giving id for the button. here's the example:
$('#table_id').DataTable({
"serverSide": true,
"processing": true,
"ajax": function (data, callback, settings) {
$.ajax({
url: '/some url',
type: 'GET',
data: data,
success: function (data) {
console.log(data)
}
});
},
buttons: [
{ text: 'Add', name: 'btnAdd',
attr:{
id: 'btnAdd'
}},
{ extend: 'selected', text: 'Edit', name: 'btnEdit',
attr:{
id: 'btnEdit'
}},
{ extend: 'selected', text: 'Delete', name: 'btnDelete',
attr:{
id: 'btnDelete'
}},
],
"columns": [{
"title": "edit",
"data": null,
"className": "center",
"defaultContent": ' Edit / Delete '
}, {
"title": "name",
"data": "name"
}, {
"title": "id",
"data": "id"
},
]
});
$(document).on('click', '#btnAdd', function(e)
{
e.preventDefault();
e.stopPropagation();
//your code here
});
$(document).on('click', '#btnEdit', function(e)
{
e.preventDefault();
e.stopPropagation();
//your code here
});
$(document).on('click', '#btnDelete', function(e)
{
e.preventDefault();
e.stopPropagation();
//your code here
});
Sorry for many Edit Hope it helps!
Having the DataTable below, I would like to display a dynamic popup or modal whenever a button is clicked which will serve as a confirmation modal.
The modal should contain data coming from the columns in the respected row in which the button was clicked.
#section scripts
{
<script>
$(document).ready(function() {
var table = $('#visitorsTable').DataTable({
"ajax": {
...
},
"columns": [
{ "data": "FirstName" },
{ "data": "LastName" },
{ "data": "Email" },
{ "data": "PhoneNumber" },
{ "data": "WifiCode" },
],
columnDefs: [
{
targets: [4],
render: function(wifiCode, b, data, d) {
if (wifiCode) {
var content = '<span>' + wifiCode + '</span>';
if (data.Email && data.PhoneNumber) {
content +=
'<button type="button" class="btnResendByMail>Email</button>'
return content;
}
}
}
]
});
$(document).on('click',
'.btnResendByMail',
function() {
$.ajax({
....
});
});
});
</script>
}
I've seen on DataTables site the "responsive" plugin.
However, on their example the modal is triggered always by clicking on the first column, and they display all the data of the row, not specific columns.
Any idea ?
...if I got your question properly, I believe, that's what you're trying to achieve:
srcData = [
{name: 'Albert', lastname: 'Einstein', email: 'emc2#gmail.com', code: 'XOIUE#WL'},
{name: 'Nikola', lastname: 'Tesla', email: 'firebolt#hotmail.com', code: 'OUWelks'},
{name: 'Rudolf', lastname: 'Hertz', email: 'radiohead#yahoo.com', code: 'joi23.xs'},
{name: 'James', lastname: 'Maxwell', email: 'magneto#gmail.com', code: 'Moiu23s'},
];
var dataTable = $('#mytable').DataTable({
sDom: 't',
data: srcData,
columns: [
{title: 'Name', data: 'name'},
{title: 'Lastname', data: 'lastname'},
{title: 'e-mail', data: 'email'},
{
title: 'Wi-Fi code',
data: 'code',
render: (data) => data+'<button style="float:right">e-mail</button>'
}
]
});
$('#mytable').on('click', 'button', event => {
let rowData = dataTable.row($(event.target).closest('tr')).data();
alert(`Are you sure you wanna send wi-fi code "${rowData.code}" to that sneaky bastard ${rowData.name} on his e-mail (${rowData.email})?`);
});
<!doctype html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
</head>
<body>
<table id="mytable"></table>
</body>
</html>
I'm using datatable plugin and want to refresh table by ajax. I've read here to make my ajax return shows in table but it doesn't work. Here is my html code:
<button type="button" onclick="rld()">test</button>
<table id="sample_1">
<thead>
<tr>
<th> 1 </th>
<th> 2 </th>
<th> 3 </th>
</tr>
</thead>
</table>
My java function:
function rld(){
var table = $('#sample_1').DataTable( {
ajax: '<?php echo site_url('admin/test'); ?>',
deferRender: true,
columns: [
{ data: '1' },
{ data: '2' },
{ data: '3' }
],
rowId: 'extn',
select: true,
dom: 'Bfrtip',
buttons: [
{
text: 'Reload table',
action: function () {
table.ajax.reload();
}
}
]
} );
}
I can't get what the problem is. there in no alerts but in the console i get TypeError: f is undefined
and TypeError: c is undefined
Which i don't know why cause my json return is correct (checked in [JSONLint][3]).
Thanks in advance.
Thank you all for your attention :)
Found that i didn't call where the data goes when returned as json and the json field's name isn't equal to the column data field name. So make this adjustment:
function reload_table(){
var table = $('#sample_1').DataTable();
table.destroy();
var table = $('#sample_1').DataTable( {
"processing": true,
"dataType": 'json',
ajax: '<?php echo site_url('admin/relaod_table'); ?>',
deferRender: true,
columns: [
{ data: 'user_firstname' },
{ data: 'user_lastname' },
{ data: 'user_status' },
{ data: 'user_created_date' },
],
dom: 'Bfrtip',
buttons: [
{
text: 'Reload table',
action: function () {
table.ajax.reload();
}
}
]
} );
}
Actually my requirement is want to create custom dropdownlist in the column header of kendo grid. I don't down like nrwant to use filtler column. I just want to add normal dropdown in header. Please provide any example like that so that i can move forward on my task.
Thanks in advance...
In your column definition add a property like this:
headerTemplate: '<input id="dropdown" />'
Then after your grid initialization do:
$("#dropdown").kendoDropDownList({...init parameters...});
UPDATE: go to dojo.telerik.com and paste in the following code:
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{
field: "ProductName",
title: "Product Name",
headerTemplate: '<input id="dropdown" />'
},
{ field: "UnitPrice", title: "Price", template: 'Price: #: kendo.format("{0:c}", UnitPrice)#' }
],
pageable: true,
dataSource: {
transport: {
read: {
url: "http://demos.telerik.com/kendo-ui/service/products",
dataType: "jsonp"
}
},
pageSize: 10
},
excelExport: function(e) {
var sheet = e.workbook.sheets[0];
var template = kendo.template(this.columns[1].template);
for (var i = 1; i < sheet.rows.length; i++) {
var row = sheet.rows[i];
var dataItem = {
UnitPrice: row.cells[1].value
};
row.cells[1].value = template(dataItem);
}
}
});
$("#dropdown").kendoDropDownList({
optionLabel: 'Choose a value...',
dataTextField: 'description',
dataValueField: 'id',
dataSource:{
data: [{id: 1, description: 'One'},{id: 2, description: 'Two'}]
},
change: function(e){
//do whatever you need here, for example:
var theGrid = $("#grid").getKendoGrid();
var theData = theGrid.dataSource.data();
$(theData).each(function(index,item){
item.ProductName = e.sender.text();
});
theGrid.dataSource.data(theData);
}
});