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 }
]
});
}
Related
HTML :
<div class="datatable-header">
<button type="button" name="add" id="add" class="float-right btn btn-info">Add</button>
</div>
<div class="table-responsive">
<table class="table datatable-basic table-striped table-hover table-bordered"
data-data-url="<?= $this->url('bla/blabla/ajax', ['action' => 'list']) ?>
id="text-dataTable"
>
<thead>
<tr>
<th>Text</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
JQuery:
const textTable = $('#text-dataTable');
const textDataTable = textTable.DataTable({
"lengthMenu": [[10, 25, 50, 75, -1], [10, 25, 50, 75, "All"]],
"dom": '<"top"fBr><"datatable-scroll-wrap"t><"bottom mt-2"ilp>',
"lengthChange": true,
"pageLength": 25,
"autoWidth": false,
"searching": false,
"order": [[0, 'asc']],
"ajax": {
"url": textTable.data('data-url'),
"type": "POST"
},
"columnDefs": [
{ targets: [1], className: "text-center"},
],
"columns": [
{ data: "text", "render": function (data, type, full, meta) {
return '<textarea style="width: 100%" contenteditable id="text" class="update" data-id="'+full.id+'" data-column="text">' + data + '</textarea>';
}
},
{ data: "textId", "render": function (data, type, full, meta) {
let $html = '<a class="btn bg-success m-1 update" data-id="'+data+'"><i class="icon-floppy-disk"></i> Update</a>';
$html += '<a class="btn bg-danger m-1 remove" data-id="'+data+'"><i class="icon-trash"></i> Delete</a>';
$html += '<a class="btn bg-grey m-1 reset" data-id="'+data+'"><i class="icon-reset"></i> Reset</a>';
return $html;
}
},
],
"rowCallback": function (row, data, index) {
if (data.hasOwnProperty('rowClass')) {
$(row).attr('class', data.rowClass);
}
$('td:last', row).attr('class', 'text-center');
}
});
$('#add').click(function(){
const addedRow = textDataTable.row.add(
{
"text": "aa",
"textId": "bb",
}
);
textDataTable.draw( false );
const addedRowNode = addedRow.node();
$(addedRowNode).addClass('highlight');
});
Result:
it's updating the text for the first column and the data-id of the second column, my goal is to add a new empty row, which means i want the first column to have 'aa' and the second column to have 'bb' instead of the buttons. I tried hundreds of things in vain.
See Screenshot:
Second Thing I tried: which is a problem because if the user adds multiple rows at the same time and click insert one by one, it will always insert the value of the first new row added, since it's getting the value by id. And all the new rows have the same ID.
$('#add').click(function(){
let html = '<tr>';
html += '<td><textarea contenteditable id="new-row-text">aa</textarea></td>';
html += '<td><a class="btn bg-grey m-1 insert"><i class="icon-plus22"></i> Insert</a></td>';
html += '</tr>';
$('#text-dataTable tbody').prepend(html);
});
textDataTable.on('click', 'a.insert', function(){
swal.fire({
title: 'Are You Sure?',
showCancelButton: true,
confirmButtonClass: "btn-success",
reverseButtons: true,
showLoaderOnConfirm: true,
preConfirm: function (data) {
return new Promise(function (resolve, reject) {
$.post(
textDataTable.data('insert-url'),
{
text: $('#new-row-text').val()
},
(function data($data) {
resolve()
}),
'json'
).fail((function(xhr, status, error) {
swal.fire('Error', xhr.responseJSON.error, 'error');
}));
})
}
}).then(result => {
if (result.value) {
textDataTable.ajax.reload();
} else {
}
}, (function () {
}));
});
Solution:
const addedRow = textDataTable.row.add(
{
"text": "aa",
"textId": "bb",
"newRow": true
}
);
Then in the render function test to see if the newRow flag exists:
{ data: "textId", "render": function (data, type, full, meta) {
// Return data if new row
if (full.hasOwnProperty('newRow') {
return data;
}
.
.
},
Credit User 2Fkthorngren: https://datatables.net/forums/discussion/61522/problem-with-adding-new-empty-row/p1?new=1
Every time I reload the page I receive a pop-up window with error:
DataTables warning: table id=data-table - Requested unknown parameter
'apply_to_workdays' for row 0, column 5. For more information about
this error, please see http://datatables.net/tn/4
Assuming from the link data table is trying to get some value but it is unable to get it. The table shows up fine. I get no other errors, just those two on reload.
it shows error about apply_to_workdays but the column with it shows up perfectly, and everything works fine. I get no other errors in console/network tab.
my blade.php
<div class="table-responsive dt-responsive">
<table id="data-table" style="width: 100%;" class="display">
<thead>
<tr>
<th class="text-center">Unit</th>
<th></th>
<th>Competence Level</th>
<th style="padding-left: 0" class>Quantity</th>
<th style="padding-right: 0" class="text-right">Start -</th>
<th style="padding-left: 0" class="text-left">Finish</th>
<th style="width: 1px">Workdays</th>
<th style="width: 1px">Weekends</th>
<th style="width: 1px">Holidays</th>
<th class="text-center">Practice Type</th>
<th style="width: 10%">Action</th>
</tr>
</thead>
</table>
</div>
JS for it:
(function () {
const url = 'rotation-needs';
const positionUrl = url + '/position';
const buttonColumn = 9;
const definitionFieldValues = ['name', 'description', 'active', 'apply_to_workdays', 'apply_to_weekends', 'apply_to_holidays'];
const definition_id = 'schedule_need_definition_id';
const required = [true, false, true];
const columnDefs = [
{targets: [1, 2, 3, 4, 5, 6, 7, 8], orderable: false},
{orderable: false, className: 'reorder', targets: [buttonColumn]},
{
targets: buttonColumn,
render: function (data, type, row) {
return "<button type=\"edit-button\" data-toggle=\"modal\" data-target=\"#edit-position-Modal\"class=\"tabledit-edit-button btn btn-primary waves-effect waves-light\" style=\"float: none; margin-right: 1vw;\"><span class=\"icofont icofont-ui-edit\"></span></button>"
+ "<button type=\"button\" id=\" \" data-toggle=\"modal\" data-target=\"#remove-Modal\"class=\"tabledit-delete-button btn btn-danger waves-effect waves-light active\" style=\"float: none;\"><span class=\"icofont icofont-ui-delete\"></span></button>";
}
},
{
targets: 0,
"createdCell": function (td, data, rowData, row, col) {
$(td).css('background-color', data.color);
$(td).css('color', colors.getContrasting(data.color));
},
render: function (data, type, row) {
if (type === 'display') {
return '';
} else {
return data;
}
}
},
{
targets: [1], className: 'text-center',
render: function (data, type, row) {
var result = '';
if (row.competence_level_id_min.name !== null) {
result = result + 'min. ' + row.competence_level_id_min.name + ' <br>';
}
if (row.competence_level_id_max.name !== null) {
result = result + 'max. ' + row.competence_level_id_max.name;
}
return result;
},
"createdCell": function (td, data, rowData, row, col) {
$(td).css('background-color', rowData.organization_unit.color);
$(td).css('border-top', '1px solid #ddd');
$(td).css('color', colors.getContrasting(rowData.organization_unit.color));
}
},
{
targets: 2, className: 'text-center'
},
{
targets: 3, className: 'text-right',
render: function (data, type, row) {
return data.substring(0, 5);
}
},
{
targets: 4, className: 'text-left',
render: function (data, type, row) {
return data.substring(0, 5);
}
},
{
targets: 5, className: 'text-center',
render: function (data) {
if (data !== 0) {
return "<label class=\"badge badge-success\">✔</label>";
}
}
},
{
targets: 6, className: 'text-center',
render: function (data) {
if (data !== 0) {
return "<label class=\"badge badge-success\">✔</label>";
}
}
},
{
targets: 7, className: 'text-center',
render: function (data) {
if (data !== 0) {
return "<label class=\"badge badge-success\">✔</label>";
}
}
},
{
targets: 8, className: 'text-center',
render: function (data, type, row) {
var result = '';
if (row.practice_type_id === 1) {
/*result = result + row.practice_type_id.name + ' <br>'; - na szybko bo nie wiem czmeu nie pobiera name*/
result = 'On-call';
} else if (row.practice_type_id === 2) {
result = 'Rotation';
} else {
result = 'Not assigned';
}
return result;
}
},
]
;
const columns = [
{"data": "organization_unit"},
{"data": "competence_level_id_min"},
{"data": "quantity"},
{"data": 'time_start'},
{'data': 'time_finish'},
{'data': 'apply_to_workdays'},
{'data': 'apply_to_weekends'},
{'data': 'apply_to_holidays'},
{'data': 'practice_type_id'},
{'data': 'schedule_need_definition_position_id'}
];
create.setOnHashSuccess(hash.switchToNew);
create.createHashItemButton(definitionFieldValues, url, required);
update.updateHashMenuItem(definitionFieldValues, url + '/get');
update.confirmUpdateHashMenuItem(url + "/update", definition_id, definitionFieldValues, required);
remove.removeHashMenuItem();
remove.confirmRemoveHashMenuItem(url, hash.onRemove);
dataTable.rowGrouping(0);
dataTable.displayLength(100);
need.initializeSelects();
need.initializeCreate();
need.initializeTableCRUD(url + '/position');
need.generate();
update.setOnSuccess(function () {
sidebar.loadContent(undefined, function () {
sidebar.setActive(hash.getCurrent());
});
});
errorHandling.alertDismissButton();
});
}());
Solved my issue, in my columnDefs (target 5,6,7) I had if statements without else statements I changed from:
{
targets: 5, className: 'text-center',
render: function (data) {
if (data !== 0) {
return "<label class=\"badge badge-success\">✔</label>";
}
}
},
to:
{
targets: 5, className: 'text-center',
render: function (data) {
if (data !== 0) {
return "<label class=\"badge badge-success\">✔</label>";
} else {
return "<label class=\"badge badge-danger\">X</label>";
}
}
},
I'm trying to add an index column like this example ( https://datatables.net/examples/api/counter_columns.html ), in my table. I try to implement the code from the example to my program, but the results don't appear. How do I add an index column like the example, to my table ?
thank you
Table :
<table id="order_data">
<thead >
<tr >
<th style="text-align:center;" width="21%">Number</th>
<th style="text-align:center;" width="21%">Datetime </th>
<th style="text-align:center;" width="19%">Temp</th>
<th style="text-align:center;" width="21%">Humidity</th>
</tr>
</thead>
</table>
Javascript :
$(document).ready(function(){
$('.input-daterange').datepicker({
todayBtn:'linked',
format: "yyyy-mm-dd",
autoclose: true
});
fetch_data('no');
function fetch_data(is_date_search, start_date='', end_date='')
{
var dataTable = $('#order_data').DataTable({
dom: 'Bfrtip',
buttons: [
{
extend: 'print',
title: '<h3 align ="center">Monitoring</h3>',
text: '<i class="fa fa-pencil"></i>',
messageTop: '<p align ="center"><strong>PDF</strong> created by PDFMake with Buttons for DataTables.</p>'
},
{
extend: 'pdfHtml5',
customize: function (doc) {
doc.content[1].table.widths =
Array(doc.content[1].table.body[0].length + 1).join('*').split('');
},
title: 'Monitoring',
titleAttr: 'PDF',
text: 'PDF',
}
],
"columnDefs": [ {
"searchable": false,
"orderable": false,
"targets": 0
} ],
"order": [[ 1, 'asc' ]],
"processing" : true,
"serverSide" : true,
bFilter:false,
"ajax" : {
url:"fetch.php",
type:"POST",
data:{
is_date_search:is_date_search, start_date:start_date, end_date:end_date
},
},
});
}
$('#search').click(function(){
var start_date = $('#start_date').val();
var end_date = $('#end_date').val();
if(start_date != '' && end_date !='')
{
$('#order_data').DataTable().destroy();
fetch_data('yes', start_date, end_date);
//$("#tabel").show();
document.getElementById('tabel').style.display = "block";
}
else
{
alert("Both Date is Required");
}
});
dataTable.on( 'order.dt search.dt', function () {
dataTable.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
cell.innerHTML = i+1;
} );
} ).draw();
});
The example you're referencing isn't using server side processing. Rather it's assuming a static data source. You have serverSide: true and using an AJAX request to retrieve the data from a source so there are a couple of ways to handle this:
1) Use column render to generate the index value after the data is retrieved:
{
"sName": "Index",
"render": function (data, type, row, meta) {
return meta.row; // This contains the row index
}
}
2.) Add the index value to your data source and retrieve it along with your url:"fetch.php" request. Though this would actually act more like a unique ID and less like row numbering.
There is also an api call for row().index() that you could leverage in a number of ways.
Hi I am new and i am using dataTable to display my, mysql data.So My Data are display correctly but here my dataTable footer doesn't work correctly.
Here is my code
UI_CRUD.prototype.refreshTable = function(params = {}){
var tableBody = $('.view-datatable tbody');
var dataUrl = this.moduleURL+'/alenter code herel';
var title = this.moduleTitle;
// console.log(this.moduleTitle);
console.log('all ..');
$.ajax({
url: dataUrl,
data : params,
})
.done(function(data) {
var html = '';
$.each(data, function(index, item) {
html+= '<tr>';
$.each(item, function(index, data) {
(index != 'id') ? html+= '<td>'+data+'</td>' : html+='';
});
html+= '<td class="actions">' +
'<i class="icon-eye text-primary view-btn" data-id="'+item.id+'">'+
'</i>'+
'<span></span>'+
'<i class="icon-pencil7 text-primary edit-btn" data-id="'+item.id+'">' +
'</i>'+
'<span></span>'+
'<i class="icon-bin sweet_combine text-danger delete-btn" data-id="'+item.id+'">' +
'</i>'+
'</td>';
html+= '</tr>';
});
tableBody.html(html);
})
.fail(function(res) {
console.error(res,'UI_CRUD ERR : ');
});
}
This is the table in blade file.
<table class="table view-datatable" id="mytable">
<thead>
<tr>
<th>Company Code </th>
<th>Company Name </th>
<th>Company Address </th>
<th>Telephone No. </th>
<th>Fax No. </th>
<th style="text-align: center;">Actions</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
this is the laravel controller
public function getAll()
{
$company = $this->getCompanies();
return response()->json($company,200);
}
public function getCompanies()
{
$company = Company::select("id", "CO_COMCODE", "CO_NAME",
DB::raw("CONCAT(CO_ADD1, ',', CO_ADD2, ',', CO_ADD3, ',', CO_ADD4) AS Address"),
"CO_TELNO", "CO_FAXNO")
->get();
return $company;
}
This is response json
[{"id":39,"CO_COMCODE":"FFDE","CO_NAME":"dsfsdf","Address":"fsdfsd,fsdf,fdsf,fsdf","CO_TELNO":"123456789","CO_FAXNO":"123456789"},{"id":41,"CO_COMCODE":"AAAA","CO_NAME":"fdfdsf","Address":"dsfdsf,dfdsf,dsffdsf,fdsfsd","CO_TELNO":"123456789","CO_FAXNO":"123456789"}]
This is My Output page
This is the response
JSon Response preview and
JSon Response
After many efforts, I fixed error
Issues was with applying dataTable plugin. After I remove that js file and add new dataTable.
<table class="table view-datatable">
<thead>
<tr>
<th>Company Code </th>
<th>Company Name </th>
<th>Company Address </th>
<th>Telephone No. </th>
<th>Fax No. </th>
</tr>
</thead>
<tbody></tbody>
var table = $('.view-datatable').DataTable( {
"processing" : true,
"retrieve": true,
"ajax" : {
"url" : ajax_url
},
"columns" : [ {
"data" : "CO_COMCODE"
}, {
"data" : "CO_NAME"
}, {
"data" : "Address"
}, {
"data" : "CO_TELNO"
}, {
"data" : "CO_FAXNO"
}, {
data: null,
className: "dataTable-center",
},],
"rowCallback": function( row, data, index ) {
$('td:eq(5)', row).html(
'<i class="icon-eye text-primary view-btn" data-id="'+data.id+'">'+
'</i>'+
'<span> </span>'+
'<i class="icon-pencil7 text-primary edit-btn" data-id="'+data.id+'">' +
'</i>'+
'<span> </span>'+
'<i class="icon-bin sweet_combine text-danger delete-btn" data-id="'+data.id+'">' +
'</i>'
);
},
"pagingType": "full_numbers",
buttons: {
buttons: [
{
extend: 'colvis',
className: 'btn btn-default'
},
{
text: 'Add New',
className: 'add-new btn bg-blue-800 ui-add-new',
action: function(e) {
// UI_addModel('show');
}
},
{extend: 'copy'},
// {extend: 'csv'},
{extend: 'excel'},
{extend: 'pdf'},
{extend: 'print'}
]
}
} );
This question already has answers here:
WEBrick: RequestURITooLarge: should I update or use a different server?
(3 answers)
Closed 5 years ago.
I am trying to add 2 more hidden columns to my datatable but I keep on receiving the URI is too large error as well as "ERROR TypeError: can't convert nil into an exact number"
Started GET "/assets/datatables/emails_datatable.self-cd9ac92f42d16be45f44ff8a616bd1ed9ff6e16588934ecabaadfff5000e4db2.js?body=1" for ::1 at 2017-07-21 14:46:15 -0400
[2017-07-21 14:46:15] ERROR WEBrick::HTTPStatus::RequestURITooLarge
[2017-07-21 14:46:15] ERROR TypeError: can't convert nil into an exact number
/Users/kristianquincosa/.rvm/gems/ruby-2.2.3/gems/activesupport-4.2.3/lib/active_support/core_ext/time/calculations.rb:226:in `-'
/Users/kristianquincosa/.rvm/gems/ruby-2.2.3/gems/activesupport-4.2.3/lib/active_support/core_ext/time/calculations.rb:226:in `minus_with_duration'
/Users/kristianquincosa/.rvm/gems/ruby-2.2.3/gems/activesupport-4.2.3/lib/active_support/core_ext/time/calculations.rb:237:in `minus_with_coercion'
/Users/kristianquincosa/.rvm/rubies/ruby-2.2.3/lib/ruby/2.2.0/webrick/accesslog.rb:111:in `setup_params'
/Users/kristianquincosa/.rvm/rubies/ruby-2.2.3/lib/ruby/2.2.0/webrick/httpserver.rb:219:in `access_log'
/Users/kristianquincosa/.rvm/rubies/ruby-2.2.3/lib/ruby/2.2.0/webrick/httpserver.rb:111:in `run'
/Users/kristianquincosa/.rvm/rubies/ruby-2.2.3/lib/ruby/2.2.0/webrick/server.rb:294:in `block in start_thread'
that is the entire error message
These are my columns specified in my email_broadcasts_datatable.rb (the commented column are the ones that trigger the error)
def data
email_broadcasts.map do |broadcast|
[
broadcast.id,
broadcast.email_clickthroughs_count,
broadcast.email_abuse_reports_count,
# broadcast.email_unsubscribes_count,
# broadcast.email_opens_count,
broadcast.status.titleize,
broadcast.scheduled,
broadcast.subject,
broadcast.user.email,
broadcast.updated_at.in_time_zone("Eastern Time (US & Canada)").strftime('%B %-d, %Y %l:%M%P'),
link_to('', edit_email_broadcast_path(broadcast), class: "btn btn-primary fa fa-cog"),
link_to('', email_broadcast_path(broadcast), method: :delete, data: {confirm: "Are you sure you want to delete this email broadcast?"}, :remote => true, class: "btn btn-danger fa fa-trash delete_email_broadcast")
]
end
end
Also this is my javascript code for the datatable.
//Code for emails datatable
$(function() {
$('#emails').DataTable({
pageLength: 10,
responsive: true,
processing: true,
serverSide: true,
autoWidth: false,
ajax: $('#emails').data('source'),
dom: '<"html5buttons"B>lTfgitp',
buttons: [
{ extend: 'copy'},
{extend: 'csv'},
{extend: 'excel', title: 'Emails'},
{extend: 'pdf', title: 'Emails'},
{extend: 'print',
customize: function (win){
$(win.document.body).addClass('white-bg');
$(win.document.body).css('font-size', '10px');
$(win.document.body).find('table')
.addClass('compact')
.css('font-size', 'inherit');
}
}
],
columnDefs: [
{
render: function ( data, type, row ) {
return data + ' ' + row[10] + ' ' + '<button type="button" class="btn btn-success" data-toggle="modal" data-target="#stats"><i class="fa fa-line-chart"></i></button>';
},
targets: 9
},
{
targets: [ 0 ], //,9,10,11
visible: false,
searchable: false
},
{
render: function ( data, type, row ) {
switch(data) {
case "Draft":
return "<span class='label label-primary'>" + data + "</span>"
case "In Queue":
return "<span class='label label-warning'>" + data + "</span>"
case "Completed":
return "<span class='label label-success'>" + data + "</span>"
case "Processing":
return "<span class='label label-info'>" + data + "</span>"
default:
break;
}
},
targets: 4
},
{
render: function ( data, type, row ) {
if (data) {
//True
return "<span class='label label-success'>Yes</span>"
} else {
return "<span class='label label-danger'>No</span>"
}
},
targets: 5
},
{
orderable: false,
targets: [5,8,9]
}
],
order: [[0, 'desc' ]],
columns: [
{ width: "0%" },
{ width: "2%" },
{ width: "2%" },
{ width: "8%" },
{ width: "8%" },
{ width: "30%" },
{ width: "18%" },
{ width: "18%" },
{ width: "12%" }
]
});
});
And this is my table in HTML
<table id="emails" class="table table-striped table-bordered table-hover" data-source="<%= email_broadcasts_path(format: :json) %>">
<thead>
<tr>
<th>Id</th>
<th>Click Throughs</th>
<th>Abuse</th>
<!-- <th>Unsuscribes</th>
<th>Opens</th> -->
<th>Status</th>
<th>Scheduled</th>
<th>Subject</th>
<th>Created By</th>
<th>Updated</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
This is a problem with WEBrick itself. It has an internal limit to the URL length.
You should run another web server like Puma, Thin, or Unicorn.
Add the following to your Gemfile to run one of those locally
group :development do
gem 'puma'
end