Related
I'm using the Ajax pager and I have some code that adds a record to my database. What I want to do is force the records to be refreshed. I'm trying to use $("builders_table").trigger("update"), but that doesn't work. If I change pages or filter the records, then the updated records are returned, but I would like to force a refresh as soon as the database is changed.
Thanks
$('#builders_table')
.tablesorter({
theme: 'blue',
widthFixed: true,
cancelSelection: false,
sortLocaleCompare: true, // needed for accented characters in the data
sortList: [ [1,1] ],
widgets: ['zebra', 'filter']
})
.tablesorterPager({
container: $('.pager'),
ajaxUrl : '/builder_data.php?page={page}&size={size}&{filterList:filter}&{sortList:column}',
// use this option to manipulate and/or add additional parameters to the ajax url
customAjaxUrl: function(table, url) {
// manipulate the url string as you desire
//url += url_extras;
// trigger a custom event; if you want
$(table).trigger('changingUrl', url);
// send the server the current page
return url;
},
ajaxError: null,
ajaxObject: {
dataType: 'json'
},
ajaxProcessing: function(data){
if (data && data.hasOwnProperty('rows')) {
return [ data.total_rows, $(data.rows) ];
}
},
// Set this option to false if your table data is preloaded into the table, but you are still using ajax
processAjaxOnInit: true,
initialRows: {
// these are both set to 100 in the ajaxProcessing
// the these settings only show up initially
total: 50,
filtered: 50
},
output: '{startRow} to {endRow} ({totalRows})',
updateArrows: true,
page: 0,
size: 50,
savePages: false,
storageKey: 'tablesorter-pager',
pageReset: 0,
fixedHeight: false,
removeRows: false,
countChildRows: false,
// css class names of pager arrows
cssNext : '.next', // next page arrow
cssPrev : '.prev', // previous page arrow
cssFirst : '.first', // go to first page arrow
cssLast : '.last', // go to last page arrow
cssGoto : '.gotoPage', // page select dropdown - select dropdown that set the "page" option
cssPageDisplay : '.pagedisplay', // location of where the "output" is displayed
cssPageSize : '.pagesize', // page size selector - select dropdown that sets the "size" option
// class added to arrows when at the extremes; see the "updateArrows" option
// (i.e. prev/first arrows are "disabled" when on the first page)
cssDisabled : 'disabled', // Note there is no period "." in front of this class name
cssErrorRow : 'tablesorter-errorRow' // error information row
});
The pager has a built-in method to force an update named "pagerUpdate":
You can force an update as follows:
$('table').trigger('pagerUpdate');
or, if you want to force an update and change the page
$('table').trigger('pagerUpdate', 3); // update and set to page 3
Using the latest jquery / tablesorter / widgets (as of Jan 18, 2016), using the pager widget, set pager_output to anything you want, so long as you include {totalRows}. Create two or more trivial tables with different id's and attach tablesorter to each id. Make sure the tables have a different number of rows. The pager will show the totalRows of the last-encountered table for every table rather than the appropriate number for each table.
The same is true for {filteredRows} when you including filtering.
It works fine for me... make sure that the code isn't pointing to the same pager container for both tables (demo)
$('table').each(function(){
$(this).tablesorter({
theme: "bootstrap",
widthFixed: true,
headerTemplate: '{content} {icon}',
widgets: ["uitheme", "filter", "zebra"],
})
.tablesorterPager({
container: '.' + this.id,
cssGoto: ".pagenum",
output: '{startRow} - {endRow} / {filteredRows} ({totalRows})'
});
});
Update: Oops, here is a demo using the pager widget
$('table').each(function(){
$(this).tablesorter({ debug: true,
theme: "bootstrap",
widthFixed: true,
headerTemplate: '{content} {icon}',
widgets: ["uitheme", "filter", "zebra", 'pager'],
widgetOptions: {
pager_selectors : {
container : '.' + this.id
},
pager_output: '{startRow} - {endRow} / {filteredRows} ({totalRows})'
}
});
});
I am having multiple highchart charts of various types(Bar,Pie, Scatter type) in a single web page. Currently I am creating config object for each graph like,
{
chart : {},
blah blah,
}
And feeding them to a custom function which will just call HighCharts.chart(). But this results in duplication of code. I want to manage all this chart rendering logic centrally.
Any Idea on how to do this?
You can use jQuery.extend() and Highcharts.setOptions.
So first you'll make the first object which will be extended by all your charts, this object will contain your Highchart default functions.
You can do it using namespacing.
The following way is good when you have very different charts.
Default graphic:
var defaultChart = {
chartContent: null,
highchart: null,
defaults: {
chart: {
alignTicks: false,
borderColor: '#656565',
borderWidth: 1,
zoomType: 'x',
height: 400,
width: 800
},
series: []
},
// here you'll merge the defauls with the object options
init: function(options) {
this.highchart= jQuery.extend({}, this.defaults, options);
this.highchart.chart.renderTo = this.chartContent;
},
create: function() {
new Highcharts.Chart(this.highchart);
}
};
Now, if you want to make a column chart, you'll extend defaultChart
var columnChart = {
chartContent: '#yourChartContent',
options: {
// your chart options
}
};
columnChart = jQuery.extend(true, {}, defaultChart, columnChart);
// now columnChart has all defaultChart functions
// now you'll init the object with your chart options
columnChart.init(columnChart.options);
// when you want to create the chart you just call
columnChart.create();
If you have similar charts use Highcharts.setOptions which will apply the options for all created charts after this.
// `options` will be used by all charts
Highcharts.setOptions(options);
// only data options
var chart1 = Highcharts.Chart({
chart: {
renderTo: 'container1'
},
series: []
});
var chart2 = Highcharts.Chart({
chart: {
renderTo: 'container2'
},
series: []
});
Reference
http://api.highcharts.com/highcharts#Highcharts.setOptions%28%29
COMPLETE DEMO
I know this has already been answered, but I feel that it can be taken yet further. I'm still newish to JavaScript and jQuery, so if anyone finds anything wrong, or thinks that this approach breaks guidelines or rules-of-thumb of some kind, I'd be grateful for feedback.
Building on the principles described by Ricardo Lohmann, I've created a jQuery plugin, which (in my opinion) allows Highcharts to work more seamlessly with jQuery (i.e. the way that jQuery works with other HTML objects).
I've never liked the fact that you have to supply an object ID to Highcharts before it draws the chart. So with the plug-in, I can assign the chart to the standard jQuery selector object, without having to give the containing <div> an id value.
(function($){
var chartType = {
myArea : {
chart: { type: 'area' },
title: { text: 'Example Line Chart' },
xAxis: { /* xAxis settings... */ },
yAxis: { /* yAxis settings... */ },
/* etc. */
series: []
},
myColumn : {
chart: { type: 'column' },
title: { text: 'Example Column Chart' },
xAxis: { /* xAxis settings... */ },
yAxis: { /* yAxis settings... */ },
/* etc. */
series: []
}
};
var methods = {
init:
function (chartName, options) {
return this.each(function(i) {
optsThis = options[i];
chartType[chartName].chart.renderTo = this;
optsHighchart = $.extend (true, {}, chartType[chartName], optsThis);
new Highcharts.Chart (optsHighchart);
});
}
};
$.fn.cbhChart = function (action,objSettings) {
if ( chartType[action] ) {
return methods.init.apply( this, arguments );
} else if ( methods[action] ) {
return methods[method].apply(this,Array.prototype.slice.call(arguments,1));
} else if ( typeof action === 'object' || !action ) {
$.error( 'Invalid arguments to plugin: jQuery.cbhChart' );
} else {
$.error( 'Action "' + action + '" does not exist on jQuery.cbhChart' );
}
};
})(jQuery);
With this plug-in, I can now assign a chart as follows:
$('.columnChart').cbhChart('myColumn', optionsArray);
This is a simplistic example of course; for a real example, you'd have to create more complex chart-properties. But it's the principles that concern us here, and I find that this approach addresses the original question. It re-uses code, while still allowing for individual chart alterations to be applied progressively on top of each other.
In principle, it also allows you to group together multiple Ajax calls into one, pushing each graph's options and data into a single JavaScript array.
The obligatory jFiddle example is here: http://jsfiddle.net/3GYHg/1/
Criticism welcome!!
To add to #Ricardo's great answer, I have also done something very similar. In fact, I won't be wrong if i said I went a step further than this. Hence would like to share the approach.
I have created a wrapper over the highchart library. This gives multiple benefits, following being the main advantages that encouraged going in this path
Decoupling: Decouples your code from highcharts
Easy Upgrades: This wrapper will be the only code that will require modification in case of any breaking changes in highchart api after upgrades, or even if one decides to move to a differnt charting library altogether (even from highchart to highstock can be exhaustive if your application uses charts extensively)
Easy of use: The wrapper api is kept very simple, only things that may vary are exposed as options (That too whose values won't be as a deep js object like HC already has, mostly 1 level deep), each having a default value. So most of the time our chart creation is very short, with the constructor taking 1 options object with merely 4-5 properties whose defaults don't suit the chart under creation
Consistent UX: Consistent look & feel across the application. eg: tool tip format & position, colors, font family, colors, toolbar (exporting) buttons, etc
Avoid duplication: Of course as a valid answer of the asked question it has to avoid duplication, and it does to a huge extent
Here is what the options look like with their default values
defaults : {
chartType : "line",
startTime : 0,
interval : 1000,
chartData : [],
title : "Product Name",
navigator : true,
legends : true,
presetTimeRanges : [],
primaryToolbarButtons : true,
secondaryToolbarButtons : true,
zoomX : true,
zoomY : false,
height : null,
width : null,
panning : false,
reflow : false,
yDecimals : 2,
container : "container",
allowFullScreen : true,
credits : false,
showAll : false,
fontSize : "normal", // other option available is "small"
showBtnsInNewTab : false,
xAxisTitle : null,
yAxisTitle : null,
onLoad : null,
pointMarkers : false,
categories : []
}
As you can see, most of the times, its just chartData that changes. Even if you need to set some property, its mainly just true/false types, nothing like the horror that highchart constructor expects (not critizing them, the amount of options they provide is just amazing from customization Point of View, but for every developer in the team to understand & master it can take some time)
So creation of chart is as simple as
var chart=new myLib.Chart({
chartData : [[1000000,1],[2000000,2],[3000000,1],[4000000,5]]
});
i was trying to do a Cell Editing based on this documentation
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:cell_editing
I have two questions:
How can i get the Index of my row posted to the server:
The information i'm getting posted is the following:
a) value of the cell
b) RowId
The thing is that the rowId doesn't help me. I need the actual Id of the information I'm displaying so i can do the server update with that Id.
colNames: ['Id', 'Codigo', 'Nombre'],
colModel: [
{ name: 'Id', index: 'Id', width: 50, align: 'left', hidden: true },
{ name: 'Codigo', index: 'Codigo', width: 55, align: 'left', editable: true, editrules:
{ number: true} },
{ name: 'Nombre', index: 'Nombre', width: 200, align: 'left' }],
I need the value of the column 'Id' to do my update.
2.I don't understand in the documentation how to manage an error from the server, so I can display the error message.
Thank you very much!
Notes:
a) I've already asked in the forum of trirand, but no one reply it to me.
b) If anyone has done this, it would help if help me pasting the code.
c) I'm working on MVC 2 Asp.net
mostly one you inline editing or form editing and not cell editing. I recommend you to switch to one of the two modern form editing or you
The information RowId is already the value of the column 'Id'. getInd(rowid,false) method returns the index of the row in the grid table specified by id=rowid.
To be able to display error returns from server you needs know the format of data returned from server in the error case. If error returned from server have, for example, JSON format {"Detail":"error text"} (errors from WFC service) you can define loadError parameter of jqGrid like:
loadError: function(xhr, st, err) { alert(errorTextFormat(xhr)); }
where errorTextFormat function which decode the error message and can looks like
var errorTextFormat = function (data) {
var str = data.responseText.substr(0, 10);
if (str === '{"Detail":') {
var errorDetail = jQuery.parseJSON(data.responseText);
var s = "Error: '";
s += data.statusText;
s += "'. Details: ";
s += errorDetail.Detail;
return s;
} else {
var res = "Status: '";
res += data.statusText;
res += "'. Error code: ";
res += data.status;
return res;
}
};
The same function you can use to decode errors of row editing (at least inline editing or form editing). ASP.NET MVC returns mostly messages in HTML format so your error decoding function should be another. I don't use cell editing as the most other people do, so can not help you in the case or customizing of the error messages in cell editing.
Q1:
you can use Key:true , editable: true, in colModel
{ key:true, name: 'Id', index: 'Id', width: 50, align: 'left', editable: true, hidden:true}
Then in add/edit method ( add beforeShowForm method in add/edit method), you have to explicitly hide this field the field of id inside of beforeShowForm method
$('#tr_Id').hide();
i.e
beforeShowForm: function (e) {
$('#tr_Id').hide();
}
Q2:
add 'afterSubmit' method in add/edit/delete method , i'm using Web api Server ,
i.e
afterSubmit: function (response) {
if (response.statusText == 'Created') {
// alert("Create Successfully")
ShowMessage("Add Successfully", 'Success');
//reload the grid
$(this).jqGrid("setGridParam", { datatype: 'json' });
return [true];
}
else {
ShowMessage("Operation Failed", 'Error');
return [false];
}
},
I hope this will work for you. Still u Need Any kind of help please comment below
I have an ASP.NET MVC application which is executing a search against a products database. I want to display the results in a jqGrid using the TreeGrid module. I don't really need the grid to be AJAX-y because the data is static and it is small enough that it can all be sent to the client at once.
First question: how do I set up jqGrid so that instead of pulling the JSON data from a URL it just looks in a JS variable or something?
Secondly, what is the most appropriate way to get ASP.NET MVC to put JSON data into a JavaScript variable? I already have the List in my controller and just want to somehow get it out into a JS variable after JSON-ing it.
Or am I fighting against the current too much and just accept the AJAX-y way that jqGrid seems to want to work?
Thanks,
~ Justin
Here is how to display a jqGrid tree using a JavaScript function.
$(document).ready(function() {
TreeDemo.setupGrid($("#tree"));
});
TreeDemo = {
data: { A: ["A1", "A2"], B: ["B1", "B2"] },
setupGrid: function(grid) {
grid.jqGrid({
colNames: ['Name'],
colModel: [
{ name: 'Name', index: 'Name', width: "250em" }
],
datatype: TreeDemo.treeData,
loadui: "none",
sortname: 'Number',
treeGrid: true,
treeGridModel: "adjacency",
sortorder: "asc"
})
},
treeData: function(postdata) {
var items = postdata.nodeid ? TreeDemo.data[postdata.nodeid] : TreeDemo.data;
var i = 0;
var rows = new Array();
for (val in items) {
var isLeaf = postdata.nodeid != undefined;
rows[i] = {
Name: val,
Id: val,
level: postdata.nodeid ? 1 : 0,
parent: postdata.nodeid || null,
isLeaf: isLeaf ? "true" : "false",
expanded: "false"
}
i++;
}
$("#tree")[0].addJSONData({
Total: 1,
Page: 1,
Records: 2,
Rows: rows
});
}
};
Note that there are lots of options for how you do this and my example is only one.
The way I would get the JSON into a JS var is to either:
Write a HTML Helper which emits a short script to the page.
Write an action which returns a JavaScriptResult to get the data in a file, if, for some reason, you can't have the data inline.
You create the JSON using the .NET JavaScript serializer. Look at the JsonResult.ExecuteResult in the MVC source code for an example.
See the Data Manipulation page in the jqGrid documentation wiki. There you'll find many ways to feed the data to the grid.
There is also a Table_to_jqGrid plugin that may be an useful option.