I'm using Laravel 8 and Bootsrap in this project. I've tried to solve this problem with Carbon in Laravel, but the prob still likes that.
So I think maybe the problem in JS Script, but I dunno about JS so deep. I really need help with this prob.
My problem is how to change the date format in JS, I wish to change in DD/MM/YYYY format.
JS Script
<script>
$(function() {
$('#kategoris-table').DataTable({
processing: true,
serverSide: true,
ajax: 'kategori/json',
columns: [
{ data: 'id', name: 'id' },
{ data: 'nama', name: 'nama',
fnCreatedCell: function (nTd, sData, oData, iRow, iCol) {
$(nTd).html("<a href='/kategoris/"+oData.id+"'>"+oData.nama+"</a>");
}
},
{ data: 'updated_at', name: 'updated_at'},
]
});
});
</script>
My Table View
Add this variable to the Model class:
protected $casts = [
'updated_at' => 'datetime:m/d/Y'
];
This will change the datetime format and will reflect whenever you retrieve the data through eloquent.
You could try registering an editor and using moment.js. Something like this:
var editor; // use a global for the submit and return data rendering in the examples
$(document).ready(function() {
$.fn.dataTable.moment( 'DD/MM/YYYY' );
editor = new $.fn.dataTable.Editor( {
ajax: 'kategori/json',
table: '#kategoris-table',
fields: [ {
label: 'Updated at:',
name: 'updated_at',
type: 'datetime',
def: function () { return new Date(); },
format: 'DD/MM/YYYY',
fieldInfo: 'Formatted date'
}
]
} );
$('#kategoris-table').DataTable({
processing: true,
serverSide: true,
ajax: 'kategori/json',
columns: [
{ data: 'id', name: 'id' },
{ data: 'nama', name: 'nama',
fnCreatedCell: function (nTd, sData, oData, iRow, iCol) {
$(nTd).html("<a href='/kategoris/"+oData.id+"'>"+oData.nama+"</a>");
}
},
{ data: 'updated_at', name: 'updated_at'},
]
});
});
Please see this example which includes the other libraries you would need to load at the end of the example: https://editor.datatables.net/examples/dates/formatting.html
PS - I tried to include the libraries in my answer in case of a broken link but when I do, I am given the message that "There appears to be code in my post that is not formatted properly" and I cannot seem to get it to work with formatting the links.
Related
I get the serverside data from controller, and get data using ajax. This is my datatable script.
// Data table
var table = $('.data-table').DataTable({
processing: true,
serverSide: true,
responsive: true,
ajax: "quotation",
dom: '<"top"fB>rt<"bottom"lip><"clear">',
columns: [{
data: 'quotation_no',
name: 'quotation_no'
},
{
data: 'remarks',
name: 'remarks'
},
{
data: 'quotation_date',
name: 'quotation_date'
},
{
data: 'quotation_category',
name: 'quotation_category'
},
{
data: 'quotation_status',
name: 'quotation_status'
},
{
data: 'action',
name: 'action',
orderable: false,
searchable: false
},
],
"lengthMenu": [
[10, 25, 50, -1],
[10, 25, 50, "All"]
],
});
default format for quotation_date is yyyy-mm-dd . How to make dd-mm-yyyy?
You can do something like this in the Model.
/**
* The attributes that should be cast.
*
* #var array
*/
protected $casts = [
'quotation_date' => 'datetime:d-m-Y',
];
Or, alternatively you can also use Carbon Date in the controller:
$quotationDate = Carbon::parse($item['quotation_date'])->format('d-m-Y');
Just add in your model $casts attr if you use eloquent for getting data from DB.
protected $casts = [
'quotation_date' => 'datetime:d-m-Y',
];
After it action your date format will be like dd-mm-yyyy
This is my first post please pardon me.
I have a page named messdata.blade.php .I want to update the data-table of this page for every term id.
My route will be like this
/admin/messdata/1,
/admin/messdata/2,
/admin/messdata/3.
Here 1,2,3 are the term id.I want to show the messdata in the data-table single.
Screen shot of the datatable
But though I change the id my data-table stuck on the first id and doesn't change.
This is my controller code.
public $termid=1;
public function showmess($id)
{
$this->termid=$id;
return view('foradmin.mess.messdata');
}
public function showmessdata()
{
$users= DB::select('select * from messes where termno = :termno', ['termno' => $this->termid]);
return Datatables::of($users)
->addColumn('action', function ($user) {
return "</span> OPEN";
})
->make(true);
}
This my data-table code in java-script.
<script>
var table;
$(function() {
table=$('#users-table').DataTable({
processing: true,
serverSide: true,
ajax: '{!! route('admin.messdatashow') !!}',
columns: [
{data:'id',name:'id',searchable: false},
{data: 'messno', name: 'messno' },
{data: 'startat', name: 'startat',searchable: false },
{data: 'finishat', name: 'finishat',searchable: false },
{data:'messfee',name:'messfee', searchable: false},
{data:'extrafee',name:'extrafee', searchable: false},
{data:'fine',name:'fine',searchable: false},
{data: 'action', name: 'action', orderable: false, searchable: false},
]
});
});
</script>
This is my route.
Route::get('admin/messdata/{id}','MessController#showmess')->name('admin.messdata');
Route::get('admin/messdatashow','MessController#showmessdata')->name('admin.messdatashow');
you can use $id = Request::segment(3) to get id from url
I'm trying to populate a kendo grid with data retrieved via ajax. Here is the ajax:
var model = #Html.Raw(Json.Serialize(Model));
$(document).ready(function () {
$.ajax({
url: "/Utilities/Report/Run",
data: JSON.stringify(model),
contentType: "application/json",
type: "POST",
success: function(result) {
var ds = new kendo.data.DataSource({
data: result
});
alert(result);
$("#grid").data("kendoGrid").setDataSource(ds);
},
error: function(result) {
options.error(result);
}
});
$("#grid").kendoGrid({
toolbar: ["excel", "pdf"],
excel: {
fileName: "test"
},
pdf: {
fileName: "test"
},
});
});
At the alert(result) this is what the data looks like:
[
{"TEST":"one"},
{"TEST":"two"},
{"TEST":"three"}
]
The ajax call appears to be working and the data looks good to me, but the kendo grid is not updating, it remains blank. I also do not get any error. I've tried placing the kendoGrid inside the ajax success function with the same result. I've tried using transport and read in the DataSource to retrieve the data but that kept giving me an error: n.slice is not a function. However, others seemed to think that was because there was no schema defined. Due to the kind of data I am retrieving, I cannot define this. The data retrieved from the server could have any column/field names, and any number of columns. It is not complex JSON however.
How do I get my grid to populate with this data?
I have created a new Datasource and mapped it to the existing one outside the success method.
Can you try this one below :
var newDataSource = new kendo.data.DataSource({
transport: {
read: {
url: "/Utilities/Report/Run",
dataType: "json",
data: JSON.stringify(model),
error: function (result) {
options.error(result);
}
}
}
});
var d1 = $("#grid").data("kendoGrid");
d1.dataSource.data([]);
d1.setDataSource(newDataSource );
make changes as per your necessity if I have missed any . Kendo data binding is always confusing :D
Kendo DataSource is very powerful. Ideally, you do not need to make a manual Ajax call. Instead, DataSource can Ajax request data from URL by itself, if Grid needs data.
https://jsfiddle.net/6gxqsrzu/
$(function() {
var dataSource = new kendo.data.DataSource({
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
schema: {
model: {
fields: {
OrderID: {
type: "number"
},
Freight: {
type: "number"
},
ShipName: {
type: "string"
},
OrderDate: {
type: "date"
},
ShipCity: {
type: "string"
}
}
}
},
serverPaging: true,
pageSize: 5,
serverSorting: true,
sort: {
field: 'OrderDate',
dir: 'asc'
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
sortable: true,
pageable: true,
columns: [{
field: "OrderID",
filterable: false
},
"Freight", {
field: "OrderDate",
title: "Order Date",
format: "{0:MM/dd/yyyy}"
}, {
field: "ShipName",
title: "Ship Name"
}, {
field: "ShipCity",
title: "Ship City"
}
]
});
});
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script>
<div id="grid"></div>
I am creating a table which needs editable fields..
This jquery element is appended to the page:
var container = $('#up-modal .modal-body');
var table = $('<table></table>');
table.attr('id','up-table');
table.attr('style','width:auto;');
table.attr('data-toggle', 'table');
table.attr('data-search', 'true');
table.attr('data-maintain-selected', 'true');
table.attr('data-pagination','true');
table.attr('data-page-size',3);
container.append(table);
following this, the bootstrap table function is called
$("#up-table").bootstrapTable({
columns:[
{
field: 'id',
title: 'ID',
align: 'center'
},
{
field: 'Permission',
title: 'Permission',
searchable: true
},
{
field: 'Extended',
name: 'Extended',
title: 'Properties',
editable:{
type: 'text',
pk: 1,
title: 'Modify Properties',
name: 'Extended',
validate: function(value){
value = $.trim(value);
try{
JSON.parse(value);
}catch(e){
return 'Invalid json provided for properties';
}
}
}
},
{
field: 'Access',
title: 'Access',
checkbox:true
}
],
data: tableData
});
The table is drawn correctly, but the fields are not editable. I can call $('.editable').editable(options) after the table is built and that works fine, but that stops working when pagination is involved.
I am using this example as a reference https://github.com/wenzhixin/bootstrap-table-examples/blob/master/welcome.html
oh, and I should mention the proper scripts and css files are locally hosted and being included correctly in my html.
Library quick links:
https://vitalets.github.io/bootstrap-editable/
http://bootstrap-table.wenzhixin.net.cn/
Woops. As it turns out, there are compatibility issues with x-editable, bootstrap 3 and bootstrap-tables.
To fix this all I had to do was include the bootstrap-editable-tables extension
https://github.com/wenzhixin/bootstrap-table/tree/master/src/extensions/editable
I am trying to create a kendo grid with excel export. My data is shown precisely as I want it and the grid works fine. However, the saveAsExcel function triggers the excelExport event, but no file is created. Same problem with the pdf export.
Here is my grid options:
grid = $("#grid").kendoGrid({
toolbar:["excel","pdf"],
height: 500,
scrollable: true,
groupable: true,
sortable: true,
filterable: false,
excel: {
allPages:true,
filterable:true
},
excelExport: function(e) {
console.log('Firing Export');
console.log(e.workbook);
console.log(e.data);
},
pdfExport: function(e){
console.log('PDF export');
},
columns: [
{ field: "date", title: "Time", template: "#= kendo.toString(kendo.parseDate(date), 'MM/dd/yyyy') #", width: '120px'},
{ field: "customer", title: "Customer" },
{ field: "amount", title: "Total", format: "{0:c}", width: '70px', aggregates: ["sum"]},
{ field: "paid_with", title: "Payment", width: '130px'},
{ field: "source", title: "Source" },
{ field: "sale_location", title: "Sale Location" }
]
}).data("kendoGrid");
This ajax is called whenever the search parameters for the data is changed. Where I refresh the datasource.
$.ajax({
'url':'/POS/ajax/loadTransactionsDetailsForDay.php',
'data':{
filters
},
'type':'GET',
'dataType':'json',
'success':function(response) {
var dataSource = new kendo.data.DataSource({
data: response.data.invoices,
pageSize: 100000,
schema: {
model: {
fields: {
date: {type: "string"},
customer: { type: "string" },
amount: { type: "number" },
paid_with: {type: "string"},
source: {type:"string"},
sale_location: {type:"string" }
}
}
}
});
grid.setDataSource(dataSource);
grid.refresh();
}
});
The output from my console log is.
Firing Export.
A worksheet object.
Object {sheets: Array[1]}sheets: Array[1]0: Objectlength: 1__proto__: Array[0]__proto__: Object
and and array with these objects for every row in the grid:
0: o
_events: Object
_handlers: Object
amount: 40.45
customer: "customer 1"
date: "2015-11-25T00:00:00-08:00"
dirty: false
employee: 23
paid_with: "Check"
parent: ()
sale_location: "Main"
source: "POS"
uid: "70b2ba9c-15f7-4ac3-bea5-f1f2e3c800d3"
I have the latest version of kendo, I am loading jszip. I am running it on the latest version of chrome.
I have tried all kinds of variations of this code I can think of, including removing my schema, initializing the kendo anew every time in the callback.
Anyone got any idea why this would not work?
Every example on this I can find make it look super simple, just create the grid and call export... So I have to have overlooked something.
I am grateful for any ideas about this.
Thanks.
It could be because the filename is missing.
Here the part with the filename added:
excel: {
allPages:true,
filterable:true,
fileName: "Kendo UI Grid Export.xlsx"
},
You can take a look here : Grid Excel Export
And here for the pdf: Grid Pdf Export
I have some following suggestion.
Can you add kendo deflate pako script file into your code and try.
Then remove the pdf export event and just try to export a pdf with toolbar default functionality..check whether its working or not.
try to add a data-source ajax call with in a grid option using kendo-transport technique with read method. http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-transport