$(function() {
// NOTE: $.tablesorter.theme.bootstrap is ALREADY INCLUDED in the jquery.tablesorter.widgets.js
// file; it is included here to show how you can modify the default classes
$.tablesorter.themes.bootstrap = {
// these classes are added to the table. To see other table classes available,
// look here: http://getbootstrap.com/css/#tables
table : 'table table-bordered table-striped',
caption : 'caption',
// header class names
header : 'bootstrap-header', // give the header a gradient background (theme.bootstrap_2.css)
sortNone : '',
sortAsc : '',
sortDesc : '',
active : '', // applied when column is sorted
hover : '', // custom css required - a defined bootstrap style may not override other classes
// icon class names
icons : '', // add "icon-white" to make them white; this icon class is added to the <i> in the header
iconSortNone : 'bootstrap-icon-unsorted', // class name added to icon when column is not sorted
iconSortAsc : 'glyphicon glyphicon-chevron-up', // class name added to icon when column has ascending sort
iconSortDesc : 'glyphicon glyphicon-chevron-down', // class name added to icon when column has descending sort
filterRow : '', // filter row class; use widgetOptions.filter_cssFilter for the input/select element
footerRow : '',
footerCells : '',
even : '', // even row zebra striping
odd : '', // odd row zebra striping
sortMultiSortKey: 'shiftKey',
};
$('#resetsort').click(function(e) {
$("#receipts").trigger('sortReset').trigger('applyWidgets');
return false;
});
// call the tablesorter plugin and apply the uitheme widget
$("#receipts").tablesorter({
// this will apply the bootstrap theme if "uitheme" widget is included
// the widgetOptions.uitheme is no longer required to be set
theme : "blue",
widthFixed: true,
headerTemplate : '{content} {icon}', // new in v2.7. Needed to add the bootstrap icon!
// widget code contained in the jquery.tablesorter.widgets.js file
// use the zebra stripe widget if you plan on hiding any rows (filter widget)
widgets : [ "uitheme", "filter", "zebra" ],
widgetOptions : {
// using the default zebra striping class name, so it actually isn't included in the theme variable above
// this is ONLY needed for bootstrap theming if you are using the filter widget, because rows are hidden
zebra : ["even", "odd"],
// reset filters button
filter_reset : ".reset",
// extra css class name (string or array) added to the filter element (input or select)
filter_cssFilter: "form-control",
// set the uitheme widget to use the bootstrap theme class names
// this is no longer required, if theme is set
// ,uitheme : "bootstrap"
}
})
.tablesorterPager({
// target the pager markup - see the HTML block below
container: $(".ts-pager"),
// target the pager page select dropdown - choose a page
cssGoto : ".pagenum",
// remove rows from the table to speed up the sort of large tables.
// setting this to false, only hides the non-visible rows; needed if you plan to add/remove rows with the pager enabled.
removeRows: false,
// output string - default is '{page}/{totalPages}';
// possible variables: {page}, {totalPages}, {filteredPages}, {startRow}, {endRow}, {filteredRows} and {totalRows}
output: '{startRow} - {endRow} / {filteredRows} ({totalRows})'
});
});
function yeah() {
return confirm('Are you sue you want to delete?');
$("#receipts").trigger('applyWidgets');
return false;
}
Hi,
Newbie here running Tablesorter also with Filter & Sort. Everything working perfectly (including reset buttons). As a bit of background, Im using a DotNet Nuke site with a module that delivers the rows of data.
Part of each row is a hyperlink that fires deleting a row. It also includes a section where I can insert some JavaScript.
Problem is when I delete a row, the zebra widget doesn't work. (All rows are white)
Other part of pressing the delete hyperlink is that Are you sure message come up.
My understanding is best approach here is to create a function since 2 actions need to be performed.
Function Yeah is my attempt. The page also has a resetsort button which works fine.
Ive tried putting my function just below the resetsort button but that didnt have any effect.
Thanks in advance for any assistance in getting this function going.
The sortReset method should update the widgets automatically after being applied, so I'm not sure why it isn't happening in this case.
Anyway, when a "sortReset" is triggered, some processing needs to occur, so using "applyWidgets" immediately after won't works because there needs to be a delay.
The "sortReset" trigger does include a callback, so try this code:
$("#receipts").trigger('sortReset', [function(){
$('#receipts').trigger('applyWidgets');
}]);
I'll try to figure out why this isn't happening internally when I get some free time.
Related
I am using ag grid for table view in my project(angular 6).I used on cell clicked event (cellClicked).It was working ,my problem is that it is applying for entire row cells.I also used this one : [suppressRowClickSelection]="true".but it was not working.I don't want the other cells in the row not to be triggered.
As I've mentioned in the comment, cellClicked will be fired irrespective of suppressRowClickSelection's value.
If you'd like to handle cellClicked event only for some specific column, you have to manage it yourself.
Apply a check in cellClicked handler as below.
onCellClicked: (params) => {
if (params.colDef.field === '') {
// do your stuff
}
}
I saw this response on how to hide a column. I need a little more complicated behavior. I have a react table like this
var StockTable = React.createClass({
render: function () {
var items = [];
for (var symbol in this.props.stocks) {
var stock = this.props.stocks[symbol];
items.push(<OptionRow key={stock.symbol} stock={stock} bid={this.props.bid} ask = {this.props.ask} />);
}
return (
<table table-head id="stocktable">
...
I need to detect when a user clicks on the header of the table, get the column she clicked on, and hide that column. Then, if a user clicks a separate button on the page, I need all the columns that are hidden to display again.
It would also be nice if the cursor changed to something like a hand when in the table header to alert the user that an action is possible. Like it does when you hover over a button.
I would have a list of hidden table headers in state
this.state = {hidden: []}
and event handlers for each header
<th onClick={() => hideHeader('cost')}>
to avoid rendering them
hidden.indexOf('cost') !=== -1 ? <someheader/> : null
Rendering null is a valid way to avoid rendering something.
To change pointers: How can I make the cursor a hand when a user hovers over a list item?
I am using LightSwitch HTML and I have a screen with multiple tabs, and in the screen 'created' event I want to show one of the tabs based on some logic:
myapp.MyScreen.created = function (screen)
{
if (/* some logic */) {
screen.showTab("TabOne");
} else {
screen.showTab("TabTwo");
}
}
However this throws an error when I open the screen:
TypeError: Cannot read property 'pageName' of undefined.
Has anyone encountered this and found a workaround?
Thanks for the help,
In order to use the showTab API command in the screen's created event, its use needs to be delayed until the screen has fully displayed.
This can be achieved by using a combination of the jQuery mobile pagechange event (as the LightSwitch HTML Client uses jQuery mobile) and a setTimeout with a zero timeout (to delay the showTab until the loading screen is rendered).
The following shows a revised version of your example using this approach:
myapp.MyScreen.created = function (screen) {
$(window).one("pagechange", function (e, data) {
setTimeout(function () {
if (/* some logic */) {
screen.showTab("TabOne");
} else {
screen.showTab("TabTwo");
}
});
});
};
Alongside a more advanced alternative, this approach is covered in more detail in my answer to the following post:
LightSwitch Tabbed screen in Browse template
However, as this approach is based upon delaying the showTab until the initial screen has been fully displayed, it does result in a noticeable transition from the default tab to the one displayed by the showTab method.
Whilst slightly more involved, if you'd prefer to avoid this noticeable transition, it's possible to customise the LightSwitch library to introduce a new option into the standard showScreen method. This new option will allow the desired tab page name to be specified when showing a screen.
If you'd like to introduce this additional option, you'll need to reference the un-minified version of the LightSwitch library by making the following change in your HTML client's default.htm file (to remove the .min from the end of the library script reference):
<!--<script type="text/javascript" src="Scripts/msls-?.?.?.min.js"></script>-->
<script type="text/javascript" src="Scripts/msls-?.?.?.js"></script>
The question marks in the line above will relate to the version of LightSwitch you're using.
You'll then need to locate the section of code in your Scripts/msls-?.?.?.js file that declares the showScreen function and change it as follows:
function showScreen(screenId, parameters, options) {
//return msls_shell.showScreen(
// screenId, parameters, null, false,
// options ? options.beforeShown : null,
// options ? options.afterClosed : null);
return msls_shell.showScreen(
screenId, parameters,
options ? options.pageName : null,
false,
options ? options.beforeShown : null,
options ? options.afterClosed : null);
}
You can then use this new pageName option in any of the standard screen display methods as follows:
msls.application.showScreen("MyScreen", null, { pageName: "TabOne" });
// or
myapp.showScreen("MyScreen", null, { pageName: "TabOne" });
// or
myapp.showMyScreen(null, { pageName: "TabOne" });
This results in the screen being displayed on the desired tab, without a noticeable transition from the default tab.
I've this issue I didn't see during development but it happens to my client. I use jQuery DataTables to let the user complete with information.
On a big/normal resolution this does not happened because the DataTables can show all the columns. But on lower resolution the grid shows a green plus button and the controls "inside" that group are not initialized correctly.
Normal page with lower resolution:
Using the Chrome Dev Tools' Console: I can excecute this:
$(".k_numeric").kendoNumericTextBox({ format: "c", decimals: 2 });
And the controls now are display correctly.
So it seems that when the DataTables hides columns to fit on the display, the controls are not being called by JS. I tried searching about this but I don't even know how to search it properly.
CAUSE
This issue occurs because Responsive extension creates new elements when preparing row details. These new elements need to be initialized again.
SOLUTION
You need to re-initialize those controls that become part of row details in a separate function.
The solution is to:
define a custom render for the row details with responsive.details.renderer option
call default renderer with $.fn.DataTable.Responsive.defaults.details.renderer() which returns jQuery collection.
initialize custom controls in this collection before returning it.
Example:
var table = $('#example').DataTable({
responsive: {
details: {
renderer: function (api, rowIdx, columns) {
var $details = $.fn.DataTable.Responsive.defaults.details.renderer(api, rowIdx, columns);
$(".numerictextbox", $details).kendoNumericTextBox({ format: "c", decimals: 2 });
return $details;
}
}
},
createdRow: function( row, data, dataIndex ){
$(".numerictextbox", row).kendoNumericTextBox({ format: "c", decimals: 2 });
}
});
DEMO
See this jsFiddle for code and demonstration.
LINKS
See jQuery DataTables – Responsive extension and custom controls article for more information.
I`m trying to insert a custom link to a special page in VisualEditor toolbar. See the image below.
See Image
I googled a lot but without success. Someone please give a path...
My answer is based on the following resources:
MediaWiki core JS doc (ooui-js)
VisualEditor JS doc (+ reading code of both repositories used for VE, mediawiki/extension/VisualEditor and VisualEditor)
Also, I'm pretty sure, that there is no documented way of adding a tool to the toolbar in VE, as far as I know. Although it's possible to add a tool to a group, which is already added, mostly used for the "Insert" tool group, like in Syntaxhighlight_GeSHi). There is, probably, a much easier or "better" way of doing this :)
First, VisualEditor provides a way to load additional modules (called plugins) when the main part of VE loads (mostly, when you click the "Edit" button). The modules needs to be registered via the global variable $wgVisualEditorPluginModules (or the equivalent in extension.json, if you're using the new extension registration). In your extension registration file, you should initialize a module (with your required script files to add the tool) and add it as a VE plugin.
Example PHP (old extension registration via PHP files):
// other setup...
$wgResourceModules['ext.extName.visualeditor'] = array(
'localBasePath' => __DIR__,
'remoteExtPath' => 'extName'
'dependencies' => array(
'ext.visualEditor.mwcore',
),
'scripts' => array(
'javascripts/ve.ui.ExtNameTool.js',
),
'messages' => array(
'extname-ve-toolname',
),
);
$wgVisualEditorPluginModules[] = 'ext.extName.visualeditor';
// other setup...
extension.json (new JSON-based extension registration):
// other setup...
"ResourceModules": {
"ext.geshi.visualEditor": {
"scripts": [
"javascripts/ve.ui.ExtNameTool.js"
],
"dependencies": [
"ext.visualEditor.mwcore"
],
"messages": [
"extname-ve-toolname"
]
}
},
"VisualEditorPluginModules": [
"ext.extName.visualeditor"
],
// other setup...
Now, if VE starts, it will load your module, named ext.extName.visualeditor in this example, with the script ve.ui.ExtNameTool.js. In this script, you can now do, what ever you want. As an example, this is a way to add a new module to the end of the toolgroup list in the toolbar:
Example of ve.ui.ExtNameTool.js:
( function () {
// create a new class, which will inherit ve.ui.Tool,
// which represents one tool
ve.ui.extNameTool = function extNameTool( toolGroup, config ) {
// parent constructor
ve.ui.extNameTool.super.apply( this, arguments );
// the tool should be enabled by default, enable it
this.setDisabled( false );
}
// inherit ve.ui.Tool
OO.inheritClass( ve.ui.extNameTool, ve.ui.Tool );
// every tool needs at least a name, or an icon
// (with the static property icon)
ve.ui.extNameTool.static.name = 'extname';
// don't add the tool to a named group automatically
ve.ui.extNameTool.static.autoAddToGroup = false;
// prevent this tool to be added to a catch-all group (*),
although this tool isn't added to a group
ve.ui.extNameTool.static.autoAddToCatchall = false;
// the title of the group (it's a message key,
// which should be added to the extensions i18n
// en.json file to be translateable)
// can be a string, too
ve.ui.extNameTool.static.title =
OO.ui.deferMsg( 'extname-ve-toolname' );
// onSelect is the handler for a click on the tool
ve.ui.extNameTool.prototype.onSelect = function () {
// show an alert box only, but you can do anything
alert( 'Hello' );
this.setActive( false );
}
// needs to be overwritten, but does nothing so far
ve.ui.extNameTool.prototype.onUpdateState = function () {
ve.ui.extNameTool.super.prototype.onUpdateState.apply( this, arguments );
}
// the tool needs to be registered to the toolFactory
// of the toolbar to be reachable with the given name
ve.ui.toolFactory.register( ve.ui.extNameTool );
// add this tool to the toolbar
ve.init.mw.Target.static.toolbarGroups.push( {
// this will create a new toolgroup with the tools
// named in this include directive. The naem is the name given
// in the static property of the tool
include: [ 'extname' ]
} );
} )();
After installing the extension in your LocalSettings.php and starting VE, you should see a new tool in the toolbar with the given name. Clicking it will show an alert box with content "Hello". Like written in the inline comments: In the click handler (onSelect) you can do whatever you want, e.g. open a link in a new tab, e.g. to a Special page. To get the link to a special page I would suggest to use mw.Title to get a localized namespace. For example:
var relativeUrl = mw.Title.newFromText( 'RecentChanges', -1 ).getUrl();
The first parameter of mw.Title.newFromText() is the name of the page, the second parameter is the ID of the namespace (-1 is the default for special pages and should always work).
I hope that helps!
I am not sure I understand your question entirely. It is as simple as selecting some text, clicking the chain icon, then clicking the External Link tab and pasting your link there.