I am trying to pass a user defined parameter to the Java Controller which acts as a data source to my jquery Data-Table.
The point is, i want to do this (pass the parameter) on a change event for a combobox on my jsp.
Here is my datatable initialization:
var oTable = $('#reqAllQueriesTable')
.dataTable(
{
"sDom": '<"H"l<"projectTeamTools">frtip>',
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "query/getQuery",
"bPaginate" : true,
"bLengthChange": true,
"bScrollCollapse" : true,
"iDisplayLength" : 10,
"bFilter" : true,
"bJQueryUI" : true,
"sPaginationType" : "full_numbers",
"sSearch": "Search"
});
My combobox whose values are to be passed to the controller and the respective functions are:
$("div.projectTeamTools").html('Organize by Project Teams: <select id="projectTeams"><option value="0">Project Team</option><option value="1">All</option><option value="2">Not Associated</option><c:forEach var="projectTeam" items="${userProjectTeams}"><option value="${projectTeam.projectId}">${projectTeam.projectName}</option></c:forEach></select>');
$("#projectTeams").change(function () {
onTeamSelect($(this).val());
});
function onTeamSelect(teamId){
alert(teamId +" Selected");
//This function to pass the parameter to the datatable is supposed to be here.
oTable.fnDraw();
}
The datatable then displays the new data it receives from the ajax Source getQuery.
PS: I cannot use fnServerParams as I am using the older version of datatables. I have tried using fnServerData but it did not help. I guess I am wrong in the way I am using the ajax function in fnServerData.
"fnServerData": function ( sSource, aoData, fnCallback ) {
$("#projectTeams").change(function() {
aoData.push( { "name": "myParam", "value": $("#ComboBox option:selected").value() } );
$.ajax( {
"dataType": 'json',
"url": sSource,
"data": aoData,
"success": fnCallback
});
I cannot see the parameter I want to pass in the 'Network XHR' in my browser when I select an item from the combo-box.
Please help!
Got an answer. During initialization, fnServerData should be:
"fnServerData": function ( sSource, aoData, fnCallback ) {
aoData.push( { "name" : "myTeamId", "value" : myTeamId } );
$.getJSON( sSource, aoData, function (json) {
fnCallback(json);
});
}
and the onChange function of the combobox on which I want to pass the parameter:
$("#projectTeams").change(function () {
onTeamSelect($(this).val());
});
function onTeamSelect(teamId){
myTeamId = teamId;
oTable.fnDraw();
}
where myTeamId is a global variable.
The oTable.fnDraw() redraws the datatable and assigns the value of teamId to the myTeamId, which I use in fnServerData.
This code worked for me!
Related
I'm using Extjs Bryntum Calendar to create events and want to save them as google ics file and load events again into Sch calendar.
Can any body tell how to convert from Cal.model.Event to ical events and vice versa?
data come from api as ical data.
my code IS:
resource store:
Ext.define('my.store.CalendarResource', {
extend: 'Cal.data.ResourceStore',
storeId: 'resource',
// proxy: 'memory',
model:'my.model.CalendarResource',
proxy: {
type: 'rest',
url: 'api/calendars/scheduler'
},
});
resource model:
Ext.define('my.model.CalendarResource', {
extend : 'Cal.model.Resource',
fields: [{
name: 'Id',
type:'string'
}, {
name: 'Name',
type: 'string'
}, {
name: 'Color',
type: 'string'
}, {
name: 'data'
}]
});
calendar view
Ext.define('my.view.RecurrenceCalendar', {
extend : 'Cal.panel.Calendar',
xtype : 'recurrencecalendar',
requires : [
'Sch.data.util.recurrence.Legend',
'my.store.CalendarEvent',
'my.store.CalendarResource'
],
date : new Date(),
eventStore : 'event',
resourceStore : 'resource',
// show the resource filter
resourceFilter : {
dock : 'right'
},
// Uncomment the below line to disable the recurring events feature
// recurringEvents : false,
initComponent : function () {
var me = this;
Ext.apply(me, {
eventRenderer : function (eventRecord, resourceRecord, tplData) {
var legend = '';
if (me.recurringEvents && eventRecord.getRecurrence()) {
legend = Sch.data.util.recurrence.Legend.getLegend(eventRecord.getRecurrence(), eventRecord.getStartDate());
}
return eventRecord.getName() + (legend ? ' | ' + legend : '');
},
beforeeventadd : function (me, eventRecord, resources, eOpts) {
var resourceStore = me.getResourceStore();
alert('aaaaaaa')
}
});
me.on('eventclick', function ( view, record, e ) {
var el = e.getTarget(me.getSchedulingView().eventSelector, 10, true);
me.editor.edit(record, el);
});
me.on('eventdbclick', function ( view, record, e ) {
var el = e.getTarget(me.getSchedulingView().eventSelector, 10, true);
me.editor.edit(record, el);
});
me.on('beforeeventadd',function(me, eventRecord, resources, eOpts){
alert('123')
});
Ext.getStore('resource').reload();
me.callParent(arguments);
},
onEventCreated : function (newEventRecord, resources) {
// Overridden to provide some default values
var resourceStore = this.getResourceStore();
if (!newEventRecord.getResourceId()) {
if (!Ext.isEmpty(resources)) {
newEventRecord.assign(resources);
} else if (resourceStore && resourceStore.getCount() > 0) {
newEventRecord.assign(resourceStore.first());
}
}
},
});
event store:
Ext.define('my.store.CalendarEvent', {
extend : 'Cal.data.EventStore',
storeId : 'event',
});
What have you done?
To save records as iCalendar file:
You can serialize records from store to format .ical format (https://www.ietf.org/rfc/rfc2445.txt).
To load file as events:
Ex. you can listen change in file input and decode .ical format to your model parameters.
You can use existing open source library like https://github.com/nwcell/ics.js
I'm using jQuery jTable to list some data related to a class in my model. I send the request to the corresponding method responsable for fetching the data, and when I return the necessary JSON object I get an internal server error (500).
I don't get any exception or error code in my console, everything run as usual, except that I get this error and nothing else.
Here is the relevant part of the JSP:
$('#records').jtable({
messages : myMessages,
title: 'Records',
paging: true,
pageSize: 20,
sorting: true,
defaultSorting: 'date DESC',
actions: {
listAction: '/filter'
},
fields: {
id: {
title: 'Id',
list: true,
display:function(data){
return data.record.id;
}
},
date: {
title: 'Date',
list: true,
display:function(data){
return data.record.date;
}
},
userName: {
title: 'User',
list: true,
display:function(data){
return data.record.user.name;
}
},
dealerName: {
title: 'Dealer',
list: true,
display:function(data){
return data.record.dealer.name;
}
},
vendorName: {
title: 'Vendor',
list: true,
display:function(data){
return data.record.vendor.name;
}
},
totalValue: {
title: 'Total Value',
list: true,
display:function(data){
return data.record.totalValue;
}
},
recordStatus: {
title: 'Record Status',
list: true,
display:function(data){
return data.record.recordStatus;
}
},
paymentStatus: {
title: 'Payment Status',
list: true,
display:function(data){
return data.record.paymentStatus;
}
}
}
});
$('#records').jtable('load');
And here is the Spring MVC signature mapping the request:
#RequestMapping(value = "/filter", method = RequestMethod.POST)
public #ResponseBody JsonJTableResponse filter(int jtStartIndex,
int jtPageSize, String jtSorting, HttpServletRequest request) {
long st = Long.valueOf(jtStartIndex);
long sz = Long.valueOf(jtPageSize);
List<RecordTO> records = (List<RecordTO>) mgrRecord.getList();
JsonJTableResponse jtable = new JsonJTableResponse();
jtable.setResult("OK");
jtable.setTotalRecordCount(String.valueOf(mgrRecord.getListCount()));
jtable.setRecords(records);
return jtable;
}
The filter method is getting executed. The properties I set in jtable are being set. The only thing that maybe may cause some problem (even though I can't see why) is that the records list has RecordTO objects that don't have all their properties set, just the relevants for the jTable listing.
For example, the following properties are set:
(Long) id
(Date) date
(UserTO) user.name
(DealerTO) dealer.name
(UserTO) vendor.name
(Double) totalValue
(String) recordStatus
(String) paymentStatus
I have already looked in every corner for a solution but can't figure it out.
What could be the problem?
If you want more information that you may find it's relevant, just ask me.
Thanks.
I writing a simple Spring MVC web application that use JQuery DataTable on the client-side. DataTable using server-side processing mode. The DataTable make request with parameters(in my case):
draw:1
columns[0][data]:name
columns[0][name]:
columns[0][searchable]:true
columns[0][orderable]:true
columns[0][search][value]:
columns[0][search][regex]:false
columns[1][data]:type
columns[1][name]:
columns[1][searchable]:true
columns[1][orderable]:true
columns[1][search][value]:
columns[1][search][regex]:false
columns[2][data]:action
columns[2][name]:
columns[2][searchable]:true
columns[2][orderable]:true
columns[2][search][value]:
columns[2][search][regex]:false
order[0][column]:0
order[0][dir]:asc
start:0
length:10
search[value]:
search[regex]:false
I don't know how can i parse parameters like columns[i][data], columns[i][name], columns[i][searchable], etc. The reason is why, because I don't know how many table columns I will have. How to solve this problem?
This is my Spring controller:
#RequestMapping(value = "/getImageWrappers", method = RequestMethod.POST)
public String getImageWrappers(#RequestParam Integer draw,
#RequestParam Integer start,
#RequestParam Integer length,
#RequestParam(value = "search[value]") String searchText){
}
and DataTable configuration:
$('#imageWrapperTable').DataTable({
columns:[
{"data" : "name"},
{"data" : "type"},
{"data" : "action"}
],
"processing": true,
serverSide: true,
ajax: {
url: '/getImageWrappers.json',
type: 'POST'
}
});
I just figure it out by adding this code
$('#imageWrapperTable').DataTable({
columns:[
{"data" : "name"},
{"data" : "type"},
{"data" : "action"}
],
"processing": true,
serverSide: true,
ajax: {
url: '/getImageWrappers.json',
type: 'POST',
datatype: 'json',
data: function(d){
//add your custom param here
d.name = "zxbing";
//this will put all query strings to a json object string
return JSON.stringify(d);
}
}
});
In this way, you just need to transfer only a query string to JSON object on the server side.
In a json array I would do something like this with jquery:
function displayData(x) {
x.success(function(data) {
$.each(data.columns, function(i, paramenter) {
$.each(parameter, function(a, b) {
$('#somediv').append('column'+parameter+' -> data: '+b+' ');
});
});
}),
x.error(function(data) {
//error message
})
}//end displayData
So you can loop through your array, but you gotta play around with it, I haven't tested it but in general that is the idea. Hope it helps.
I am using JQuery Datatable to show data into grid.when i am trying to access all the data by selecting all option..i am getting one error every time.
Data Table code
$(document).ready(function () {
$("#generalreport").dataTable({
"bServerSide": true,
"sScrollY": "370px",
"sAjaxSource": "ajaxSearchGeneralReport.action",
"bProcessing": true,
"sPaginationType": "full_numbers",
"bJQueryUI": true,
"bLengthChange": true,
"iDisplayLength" : -1,
"aLengthMenu": [[50,100,300,-1],[50,100,300,'All']],
"sDom": 'T<"clear"><"H"lfr>t<"F"ip>',
"oTableTools": {
"sSwfPath": "media/swf/copy_csv_xls_pdf.swf"
}
});
});
Error
ava.lang.IllegalArgumentException: fromIndex(0) > toIndex(-1)
at java.util.SubList.<init>(AbstractList.java:604)
at java.util.AbstractList.subList(AbstractList.java:468)
at x.y.z.action.GeneralReportAction.execute(GeneralReportAction.java:119)
I am new to backbone.js
I am adding rows dynamical in table(HTML), but when I print table data on save button it display empty data, my code is as follows
(function($){
Backbone.sync = function(method, model, success, error){
success();
}
var Person = Backbone.Model.extend({
defaults: {
srNo:1,
name: ''
}
});
var ListPerson = Backbone.Collection.extend({
model: Person
});
var ItemView = Backbone.View.extend({
tagName: 'tr', // name of tag to be created
events: {
'click span#spanDelete': 'remove'
},
initialize: function(){
_.bindAll(this, 'render', 'unrender', 'remove');
this.model.bind('add', this.render);
this.model.bind('remove', this.unrender);
},
render: function(){
$(this.el).append("<td>"+this.model.get('srNo')+"</td><td><input type='text' id='txt1' value="+this.model.get('name')+"></td><td><span class='delete' id='spanDelete' style='cursor:pointer; color:red; font-family:sans-serif;'>[delete]</span></td>");
return this;
},
unrender: function(){
$(this.el).remove();
},
remove: function(){
this.model.destroy();
}
});
var ListView = Backbone.View.extend({
el: $('body'), // attaches `this.el` to an existing element.
initialize: function(){
_.bindAll(this, 'render', 'addItem', 'appendItem');
this.collection = new ListPerson();
this.collection.bind('add', this.appendItem);
this.counter = 0;
this.render();
},
events: {
'click button#btnAdd': 'addItem',
'click button#btnSave': 'saveData'
},
render: function(){
var self = this;
$(this.el).append("<button id='btnAdd'>Add list item</button>");
$(this.el).append("<table border=1 id='dtl1'></table>");
$(this.el).append("<button id='btnSave'>Save</button>");
_(this.collection.models).each(function(person){
self.appendItem(person);
}, this);
},
addItem: function(){
this.counter++;
var person = new Person();
person.set({
srNo: this.counter // modify item defaults
});
this.collection.add(person);
},
appendItem: function(item){
var itemView = new ItemView({
model: item
});
$('table', this.el).append(itemView.render().el);
},
saveData: function(){
var obj=this.collection.toJSON();
var str_json = JSON.stringify(obj);
alert(str_json);
}
});
var listView = new ListView();
})(jQuery);
Name is not display in output
From what you have posted, I do not see you setting name attribute of your Person model anywhere. Within your addItem method, I see you setting the srNo attribute but nothing is done to the name as far as I can see here.
Relevant part of your code below,
var person = new Person();
person.set({
srNo: this.counter // modify item defaults
});
So you need set your name attribute like you are setting the srNo attribute
I got one tricky solution for this, i trap change event of inputtext in event block of ItemView(In above example) as events: {'click span#spanDelete': 'remove','change input#name':'textChange' }, and in textChange method i write following code textChange: function(e){
this.model.set('name',$(e.currentTarget).val());
}When i print collection value in alert i got all names inserted in inputtext.