Template.users.rendered = function () {
Template.instance().subscribe('userList');
if (Session.get('apply_tablestyling')==1) {
console.log('in datatable');
$('#users').dataTable({
"paging": true,
"lengthChange": false,
"searching": true,
"ordering": true,
"info": true,
"autoWidth": false
});
}
}
I am using datatables-bootstrap-3, I need to add export buttons. Everything is working except showing the export buttons.
have you tried adding buttons to your initialization?
buttons: ['copy', 'csv', 'excel', 'pdf', 'print']
dom: 'Bfrtip',
buttons: [
{
text: 'Export to JSON',
action: function ( e, dt, node, config ) {
var data = dt.buttons.exportData();
$.fn.dataTable.fileSave(
new Blob( [ beautify(data , null, 2, 100) ] ),
'Families_'+ Date.now() +'.json'
);
}
}
,{
text: 'Export to CSV',
action: function ( e, dt, node, config ) {
var data = dt.buttons.exportData();
$.fn.dataTable.fileSave(
new Blob( [json2csv({ data: data.body, fields: null })]),
'Families_'+ Date.now() +'.csv'
);
}
}
]
then in both routes.js :
Router.route('/users', {
name: 'users',
action: function() {
var self = this;
$.getScript('https://cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.min.js', function(data, textStatus, jqxhr) {
if(jqxhr.status === 200) {
//self.render();
$.getScript('https://cdn.datatables.net/buttons/1.2.4/js/buttons.html5.min.js', function(data, textStatus, jqxhr) {
if(jqxhr.status === 200) {
self.render();
}
});
}
});
}
});
Related
I tried so solve this for a while now, but cannot find the solution.
I cannot disable autosync for some reason. Everytime I click on "destroy" for a single row, transport.submit is triggered (and would send data to the server). I actually only want to trigger submit once, when I click the "save" button.
Is this expected behaviour? Should I handle the server communications externaly and only save locally in transport.submit? Or am I doing something wrong?
Once I remove one item using the "destroy" button, all other items are disabled until I press the "cancel" button.
How can I avoid this?
Here is my Code:
$(document).ready(function () {
var myData = getDataSource();
var dataGrid = $("#divOverview").kendoGrid({
dataSource: myData,
sortable: true,
filterable: true,
pageable: true,
toolbar: ["save", "cancel"],
columns: [
// Dataworld
{ field: "Dataworld", width: "180px" },
// Servername
{ field: "Servername"},
// IPAddress
{ field: "IPAddress"},
// Commands
{ command: ["destroy"], title: " ", width: "250px" }
],
editable: {
mode: "inline",
confirmation: false
}
});
});
function getDataSource(){
var datasource = new kendo.data.DataSource({
transport: {
read: function(options) {
$.ajax({
url: "../AccountSyncConfig/GetAccountSyncConfig.erb",
dataType: "json",
data: {mandatorID: mandatorID},
success: function(result) {
options.success(result);
},
error: function(result) {
options.error(result);
}
});
},
submit: function(e) {
var data = e.data;
console.log(data);
},
parameterMap: function(data, type) {
if (type == "read") {
return { mandatorID: mandatorID};
} else if (type == "submit") {
//console.log( {models: JSON.stringify(data.models)} );
return {
data: kendo.stringify({
mandatorID: mandatorID,
models: data.models
})
};
} else {
return "";
}
}
},
schema: {
model: {
id: "EntryID",
fields: {
Dataworld: {
type: "string",
validation: {
required: true
}
},
Servername: {
type: "string",
validation: {
required: true
}
},
IPAddress: {
type: "string",
validation: {
required: true,
IPAddressvalidation: function (input) {
if (input.val() != "") {
input.attr("data-IPAddressvalidation-msg", "Ungültige IP-Adresse");
return /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(input.val());
}
return true;
}
}
}
},
}
},
autoSync: false,
batch: true,
pageSize: 10
});
return datasource;
}
When page load for the first time, I got json object returned from controller. But after deletion of a data it doesn't return json object. I mean, I can access requestTable.ajax.json() after initial load of var requestTable = $('#Request-Table').DataTable({});. But after any event when the table got redrawn, requestTable.ajax.json() gives an error.
My main concern is how to get value of recordsTotal from json object after every event. Can anyone assist me with that?
Routes:
Route::group(['prefix' => '/requests'], function () {
Route::get('/show', [
'uses' => 'InvitationController#show',
'as' => 'requests.show',
]);
Route::delete('/delete/{id}', [
'uses' => 'InvitationController#destroy',
'as' => 'requests.destroy',
]);
});
Controller:
public function show()
{
return Datatables::of(Invitation::query()->whereNull('invitation_token'))->make(true);
}
public function destroy($id)
{
$invitations = Invitation::where('id', $id)->delete();
return Response::json($invitations);
}
DataTable Function:
// Initial Load
requestTable = $('#Request-Table').DataTable({
processing: true,
serverSide: true,
order: [[ 3, "asc" ]],
pagingType: "full_numbers",
ajax: '{{ route('requests.show') }}',
columns: [
{ data: 'id', name: 'id' },
{ data: 'email', name: 'email' },
{ data: 'created_at', name: 'created_at' },
],
columnDefs: [
{
targets: 0,
visible: false,
searchable: false
},
{
targets: 3,
render: function(data, type, row, meta){
return "<button type=\"button\" class=\"delete-request btn btn-sm btn-danger\" data-toggle=\"modal\" data-target=\"#Modal-Request-Delete\" data-id=\""+row.id+"\">Delete Request</button>";
},
searchable: false,
orderable: false
}
]
});
});
// Delete Request
$('body').on('click', '#Btn-Delete-Request', function () {
var requestId = $("#Delete-Request").data("id");
$("#Delete-Request").prop('id', '');
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
type: "delete",
url: "/requests/delete/"+requestId,
success: function (data) {
window.requestTable = $('#Request-Table').dataTable();
window.requestTable.fnDraw();
},
error: function (data) {
console.log('Error:', data);
}
});
});
Don't need to send data from delete you can just refresh your table by ajax.reload() function
below i put your code with modify check it's working or not
// Initial Load
var requestTable ;
requestTable = $('#Request-Table').DataTable({
processing: true,
serverSide: true,
order: [[ 3, "asc" ]],
pagingType: "full_numbers",
ajax: '{{ route('requests.show') }}',
columns: [
{ data: 'id', name: 'id' },
{ data: 'email', name: 'email' },
{ data: 'created_at', name: 'created_at' },
],
columnDefs: [
{
targets: 0,
visible: false,
searchable: false
},
{
targets: 3,
render: function(data, type, row, meta){
return "<button type=\"button\" class=\"delete-request btn btn-sm btn-danger\" data-toggle=\"modal\" data-target=\"#Modal-Request-Delete\" data-id=\""+row.id+"\">Delete Request</button>";
},
searchable: false,
orderable: false
}
]
});
});
// Delete Request
$('body').on('click', '#Btn-Delete-Request', function () {
var requestId = $("#Delete-Request").data("id");
$("#Delete-Request").prop('id', '');
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
type: "delete",
url: "/requests/delete/"+requestId,
success: function (data) {
requestTable.ajax.reload();
},
error: function (data) {
console.log('Error:', data);
}
});
});
above var requestTable so in delete function you can access that and requestTable.ajax.reload(); this function you can use to refresh you table
I have a kendo grid in angular, which is supposed to have some columns with multi-select dropdown.
When I select the item from the list for the first time, that item gets binded and the second item when selected the gridParams holds the second item selected, but once the API call returns the data, the list binded refreshes to none(no data binded to the dropdownlist).
Below is the code related
{
OC.setReportGridColumns(responsecolumns);
OC.reportsGridOptions = {
dataSource: {
schema: {
data: "Data",
total: "Total",
model: {
fields: OC.GetSchemaFields()
}
},
transport: {
read: function (e) {
gridParams = JSON.parse(JSON.stringify({
CurrentPage: e.data.page,
PageSize: e.data.pageSize,
Sort: e.data.sort,
Filter: e.data.filter
}));
if (gridParams.Filter != undefined) {
var a;
if (gridParams.Filter.filters!= undefined) {
angular.forEach(gridParams.Filter.filters, function (value, key) {
if (value.field === "QuoteStatus") {
value.operator = "in";
a = "'" + value.value + "'";
a = a.replace(",", "','");
value.value = a;
}
});
};
};
ReportService.GetAllAdHocReport(gridParams, '', OC.CustomColumnSelected, TemplateId).then(function (response) {
if (response != '') {
$("li [ui- sref='AdHocReport']").parent().addClass("activelist");
response.Total = response.Data != null && response.Data.length > 0 ? response.Data[0].TotalRecords : 10;
OC.GridConfigDataSource.read();
e.success(response);
OC.hideFilters();
} else {
e.success([]);
}
});
},
},
filterable: {
mode: "row,menu",
extra:false
},
selectable: 'cell',
columns: OC.gridCols,
}
}
}
OC.setReportGridColumns = function (colList) {
var col = JSON.parse(colList).columns;
OC.setfilterDropdown(col);
var cols = col.map(function (value) {
if (value.column == "QuoteStatus") {
return {
field: value.column,
title: value.title,
filterable: OC.filterDropdowns(value.column),
width: value.width,
sortable: true,
};
}
});
}
OC.filterDropdowns = function (column) {
return {
extra: false,
mode: "menu",
multi: true,
cell: {
showOperators: false,
template: function (args) {
/////------****Multi-select Dropdown****------///////
args.element.kendoMultiSelect({
autoBind: true,
dataTextField: "text",
dataValueField: "value",
dataSource: new kendo.data.DataSource({
data: OC.getDataForFilterDropdown(column)
}),
index: 0,
optionLabel: {
text: "--Select--",
value: ""
},
valuePrimitive: true,
});
},
}
}
}
I am working on Kendo Grid, On button click, I call a function to reFetch data from db with new Parameters.
function is here
vm.refereshFigure = function (response) {
vm.gridOptions = {
datasource: new kendo.data.DataSource({
type: "odata",
transport: {
read: function (options) {
if (!!$scope.figure.figureId) {
gridService.runQuery(options, $scope.figure.figureId, response).then(function (responseData) {
options.success(responseData.data);
});
}
}
},
schema: {
data: "Data",
total: "Total"
},
change: function (e) {
debugger;
e.preventDefault();
},
pageSize: vm.gridConfigurationJson.PageSize ? vm.gridConfigurationJson.PageSize : 10,
group: vm.JsonGroupingCloumns,
aggregate: vm.aggregatesList,
serverPaging: true,
serverSorting: true,
serverFiltering: true,
filter: !!vm.gridConfigurationJson.Filter
? vm.gridConfigurationJson.Filter.filters
: vm.gridConfigurationJson.Filter,
page: vm.gridConfigurationJson.page,
sort: vm.gridConfigurationJson.sort
}),
dataBound: function (e) {
//if (vm.gridConfigurationJson.PageSize != e.sender.pager.dataSource._pageSize) {
// saveGridConfigration(e);
//}
},
groupable: true,
pageable: {
refresh: true,
pageSizes: [10, 25, 50, 100, 200, "All"],
buttonCount: 5,
},
noRecords: true,
filterable: true,
sortable: {
mode: "multiple",
allowUnsort: true,
showIndexes: true
},
resizable: true,
reorderable: true,
columnMenu: true,
columns: vm.columnsList,
toolbar: ["excel"],
excel: {
allPages: true,
filterable: true,
},
excelExport: function (e) {
try {
var sheet = e.workbook.sheets[0];
for (var rowIndex = 1; rowIndex < sheet.rows.length; rowIndex++) {
var row = sheet.rows[rowIndex];
for (var cellIndex = 0; cellIndex < row.cells.length; cellIndex++) {
if (this.columns[cellIndex].type == 'date') {
row.cells[cellIndex].format = "yy-MM-dd hh:mm:ss";
row.cells[cellIndex].value =
kendo.parseDate(row.cells[cellIndex].value, "yyyy-MM-ddTHH:mm:ss");
}
}
}
} catch (e) {
}
var filename = "";
if ($scope.figure.captionView != undefined) {
filename = $scope.figure.captionView;
} else if ($scope.figure.caption != undefined) {
filename = $scope.figure.caption;
}
e.workbook.fileName = filename + ".xlsx";
},
};
$scope.filterChanged(response, undefined, $scope.figure.figureId);
};
It called web api two times. Below is the code in read function which executes two times.
if (!!$scope.figure.figureId) {
gridService.runQuery(options, $scope.figure.figureId, response).then(function (responseData) {
options.success(responseData.data);
});
}
After first Call, It goes Change() event, then call read() again.
Can anyone help me what I am doing wrong?
I have this code for my jqrid. But the data is not getting displayed in grid. The grids gets generated but no data is being shown in the grid. Also I have applied error control but that gives me no error. The code is as follows:
$(document).ready(function () {
'use strict';
var expHeadVal = "12345:Party;12346:Miscellaneous;12347:Conveyance;12348:Staff Welfare";
var webForm = document.forms[0];
var i = 0;
var mydata = "";
var jsonData = {
"records": "4",
"userData":{
},
"rows":[
{"id":"1", "sdate":"2013-03-22","expHead":"Party","expAmt":"1000","expReason":"Yes","expRemark":"FedEx"},
{"id":"2", "sdate":"2013-03-21","expHead":"Conveyance","expAmt":"200","expReason":"Yes","expRemark":"FedEx"},
{"id":"3", "sdate":"2013-03-20","expHead":"Conveyance","expAmt":"165","expReason":"Yes","expRemark":"FedEx"},
{"id":"4", "sdate":"2013-03-11","expHead":"Staff Welfare","expAmt":"1653","expReason":"Yes","expRemark":"FeEx"}
]
}
// alert (jsonData.rows[3].id);
var $grid = $("#View1"),
initDateWithButton = function (elem) {
if (/^\d+%$/.test(elem.style.width)) {
// remove % from the searching toolbar
elem.style.width = '';
}
// to be able to use 'showOn' option of datepicker in advance searching dialog
// or in the editing we have to use setTimeout
setTimeout(function () {
$(elem).datepicker({
dateFormat: 'dd-M-yy',
showOn: 'button',
changeYear: true,
changeMonth: true,
showWeek: true,
showButtonPanel: true,
onClose: function (dateText, inst) {
inst.input.focus();
}
});
$(elem).next('button.ui-datepicker-trigger').button({
text: false,
icons: {primary: 'ui-icon-calculator'}
}).find('span.ui-button-text').css('padding', '0.1em');
}, 100);
},
numberTemplate = {
formatter: 'number',
align: 'right',
sorttype: 'number',
editable: true,
searchoptions: { sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge', 'nu', 'nn', 'in', 'ni'] }},
dateTemplate = {
align: 'center',
sorttype: 'date',
editable: true,
formatter: 'date',
formatoptions: { newformat: 'd-M-Y' },
datefmt: 'd-M-Y',
editoptions: { dataInit: initDateWithButton, size: 11 },
searchoptions: {
sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge'],
dataInit: initDateWithButton,
size: 11, // for the advanced searching dialog
attr: {size: 11} // for the searching toolbar
}
},
lastSel;
$grid.jqGrid({
datatype: "local",
data: jsonData,
jsonReader : {
// userdata: "userData",
root: "rows",
repeatitems: false,
// id: "1",
records: "records"
},
// data: jsonData,
colNames: ['Date','Expense Head','Amount', 'Reason','Remarks'],
colModel: [
// {name:'id', index:'id', width:15, editable:false, key: true, hidden: true},
{name:'sdate', index:'sdate', width:200, template: dateTemplate },
{name:'expHead', index:'expHead', width:150, editable:true, sorttype:'number',sortable:true, edittype:"select", editoptions:{value:expHeadVal}},
{name:'expAmt', index:'expAmt', width:100, editable:true, template: numberTemplate, summaryType:'sum' },
{name:'expReason', index:'expReason', width:200, editable: true,edittype:"textarea", editoptions:{rows:"2",cols:"30"}},
{name:'expRemark', index:'expRemark', width:200,editable: true,edittype:"textarea", editoptions:{rows:"2",cols:"30"}}],
loadtext: "Loading...",
sortname: ['Col0','Col1'],
pager: '#pView1',
caption: "Expense Table",
gridview: true,
rownumbers: true,
autoencode: true,
ignoreCase: true,
viewrecords: true,
sortorder: 'desc',
height: '100%',
editurl: 'clientArray',
beforeSelectRow: function (rowid) {
if (rowid !== lastSel) {
$(this).jqGrid('restoreRow', lastSel);
lastSel = rowid;
}
return true;
},
ondblClickRow: function (rowid, iRow, iCol, e) {
var p = this.p, $this = $(this);
// if the row are still non-selected
if ((p.multiselect && $.inArray(rowid, p.selarrrow) < 0) || rowid !== p.selrow)
{ $this.jqGrid("setSelection", rowid, true); }
$this.jqGrid('editRow', rowid, true, function () {
if (e.target.disabled)
{ e.target.disabled = false; }
$("input, select", e.target).focus();
});
return;
},
loadComplete: function () {
alert("OK");
},
loadError: function (jqXHR, textStatus, errorThrown) {
alert('HTTP status code: ' + jqXHR.status + '\n' +
'textStatus: ' + textStatus + '\n' +
'errorThrown: ' + errorThrown);
alert('HTTP message body (jqXHR.responseText): ' + '\n' + jqXHR.responseText);
}
});
$grid.jqGrid('gridResize', { minWidth: 450, minHeight: 150 });
$grid.jqGrid('navGrid', '#pView1', {refreshstate: 'current', edit: false, add: false, del: false});
$grid.jqGrid('inlineNav',"#pView1");
});
Can anybody tell me what is missing here?
Thanks for your help in advance.
Siddhartha
You should change data: jsonData to data: jsonData.rows because you use datatype: "local".
By the way jsonReader option will not used in case of datatype: "local". The format of data in jsonData.rows already corresponds default format of input data for datatype: "local". If you do will need to fill jqGrid having datatype: "local" with another format of data you should use localReader option instead of jsonReader (see the documentation).