Why aren't the column order (asc/desc) images displayed? #920
Comments
|
Hi @SPlatten! First off, what is tablesorter v1.2.6? And the I think the |
|
Sorry, I copied the wrong version from the file, it should have been v2.22.1 I'm working on a Windows 7 system, when I unzipped the archive, the css I have installed in: The blue folder has the following files: |
|
Make sure you have the CSS files from Mottie's fork do not use the versions from tablesorter.com Sent from my iPhone
|
|
I think the problem I have is the zip I downloaded, extracts quite a different folder structure than the archive you have here...I've now downloaded your archive, still no img tags in the document tho. Where should the css folder be in relation to the jquery.tablesorter.js file? |
|
Please download these files... this branch has all the theme files in the |
|
Thank you |
|
Using the downloaded files, I have an error reported by Firebug: TypeError: Argument 1 of Window.getComputedStyle is not an object. King Regards, On 28 May 2015 at 16:57, Rob G [email protected] wrote:
http://about.me/SPlatten Simon Platten |
|
I'm trying to replicate similar functionality to that shown in the last table here: I'm having problems, as soon as I add 'filter' to the widgets array, nothing is displayed, when I remove it, the table is displayed but the headers to not line up with the content. I would post into a jsfddle session but its not straight forward to cut and paste what I have. $('.tablesorter').tablesorter({
//*** APPEARANCE ***
//Add a theme - try 'blackice', 'blue', 'dark', 'default'
// 'dropbox', 'green', 'grey' or 'ice'
//to use 'bootstrap' or 'jui', you'll need to add the "uitheme"
//widget and also set it to the same name
//this option only adds a table class name "tablesorter-{theme}"
theme: 'blue'
//fix the column widths
,widthFixed: false
//Show an indeterminate timer icon in the header when the table
//is sorted or filtered
,showProcessing: false
//header layout template (HTML ok); {content} = innerHTML,
//{icon} = <i/> (class from cssIcon)
,headerTemplate: '{content}'
//Set the scroller height
,scroller_height : 400
//Set the number of fixed columns
,scroller_fixedColumns : 1
//Add a fixed column overlay for styling
,scroller_addFixedOverlay : false
//return the modified template string
,onRenderTemplate: null // function(index, template){ return template; },
//called after each header cell is rendered, use index to target the column
//customize header HTML
,onRenderHeader: function (index) {
//the span wrapper is added by default
$(this).find('div.tablesorter-header-inner').addClass('roundedCorners');
}
// *** FUNCTIONALITY ***
//prevent text selection in header
,cancelSelection: true
// other options: "ddmmyyyy" & "yyyymmdd"
,dateFormat: "mmddyyyy"
//The key used to select more than one column for multi-column
//sorting.
,sortMultiSortKey: "shiftKey"
//key used to remove sorting on a column
,sortResetKey: 'ctrlKey'
// false for German "1.234.567,89" or French "1 234 567,89"
,usNumberFormat: true
//If true, parsing of all table cell data will be delayed
//until the user initializes a sort
,delayInit: false
//if true, server-side sorting should be performed because
//client-side sorting will be disabled, but the ui and events
//will still be used.
,serverSideSorting: false
//*** SORT OPTIONS ***
//These are detected by default,
//but you can change or disable them
//these can also be set using data-attributes or class names
,headers: {
//set "sorter : false" (no quotes) to disable the column
0: {sorter:"text"}
,1: {sorter:"digit"}
,2: {sorter: "text"}
,3: {sorter: "url"}
}
//ignore case while sorting
,ignoreCase: true
//forces the user to have this/these column(s) sorted first
,sortForce: null
//initial sort order of the columns, example sortList: [[0,0],[1,0]],
// [[columnIndex, sortDirection], ... ]
,sortList: [[0, 0], [1, 0], [2, 0]]
//default sort that is added to the end of the users sort
//selection.
,sortAppend: null
//starting sort direction "asc" or "desc"
,sortInitialOrder: "asc"
//Replace equivalent character (accented characters) to allow
//for alphanumeric sorting
,sortLocaleCompare: false
// third click on the header will reset column to default - unsorted
,sortReset: false
//restart sort to "sortInitialOrder" when clicking on previously
//unsorted columns
,sortRestart: false
//sort empty cell to bottom, top, none, zero
,emptyTo: "bottom"
//sort strings in numerical column as max, min, top, bottom, zero
,stringTo: "max"
//extract text from the table - this is how is
//it done by default
,textExtraction: {0:function (node) {
return $(node).text();
}
,1:function (node) {
return $(node).text();
}
}
//use custom text sorter
//function(a,b){ return a.sort(b); } // basic sort
,textSorter: null
//*** WIDGETS ***
//apply widgets on tablesorter initialization
,initWidgets: true
//include zebra and any other widgets, options:
//'columns', 'filter', 'stickyHeaders' & 'resizable'
//'uitheme' is another widget, but requires loading
//a different skin and a jQuery UI theme.
,widgets: ['zebra', 'columns', 'resizable', 'scroller', 'stickyHeaders']
,widgetOptions: {
//zebra widget: adding zebra striping, using content and
//default styles - the ui css removes the background
//from default even and odd class names included for this
//demo to allow switching themes
//[ "even", "odd" ]
zebra: ["ui-widget-content even"
,"ui-state-default odd"]
//uitheme widget: * Updated! in tablesorter v2.4 **
//Instead of the array of icon class names, this option now
//contains the name of the theme. Currently jQuery UI ("jui")
//and Bootstrap ("bootstrap") themes are supported. To modify
//the class names used, extend from the themes variable
//look for the "$.extend($.tablesorter.themes.jui" code below
,uitheme: 'jui'
//columns widget: change the default column class names
//primary is the 1st column sorted, secondary is the 2nd, etc
,columns: ["primary", "secondary", "tertiary"]
//columns widget: If true, the class names from the columns
//option will also be added to the table tfoot.
,columns_tfoot: true
//columns widget: If true, the class names from the columns
//option will also be added to the table thead.
,columns_thead: true
//filter widget: If there are child rows in the table (rows with
//class name from "cssChildRow" option) and this option is true
//and a match is found anywhere in the child row, then it will make
//that row visible; default is false
,filter_childRows: false
//filter widget: If true, a filter will be added to the top of
//each table column.
,filter_columnFilters: true
//filter widget: css class applied to the table row containing the
//filters & the inputs within that row
,filter_cssFilter: "tablesorter-filter"
//filter widget: Customize the filter widget by adding a select
//dropdown with content, custom options or custom filter functions
//see http://goo.gl/HQQLW for more details
,filter_functions: null
//filter widget: Set this option to true to hide the filter row
//initially. The rows is revealed by hovering over the filter
//row or giving any filter input/select focus.
,filter_hideFilters: false
//filter widget: Set this option to false to keep the searches
//case sensitive
,filter_ignoreCase: true
//filter widget: jQuery selector string of an element used to
//reset the filters.
,filter_reset: null
//Delay in milliseconds before the filter widget starts searching;
//This option prevents searching for every character while typing
//and should make searching large tables faster.
,filter_searchDelay: 300
//Set this option to true if filtering is performed on the server-side.
,filter_serversideFiltering: false
//filter widget: Set this option to true to use the filter to find
//text from the start of the column. So typing in "a" will find
//"albert" but not "frank", both have a's; default is false
,filter_startsWith: false
//filter widget: If true, ALL filter searches will only use parsed
//data. To only use parsed data in specific columns, set this option
//to false and add class name "filter-parsed" to the header
,filter_useParsedData: false
//Resizable widget: If this option is set to false, resized column
//widths will not be saved. Previous saved values will be restored
//on page reload
,resizable: true
,resizable_widths : ['15%', '20%', '20%', '20%', '5%']
//saveSort widget: If this option is set to false, new sorts will
//not be saved. Any previous saved sort will be restored on page
//reload.
,saveSort: true
//stickyHeaders widget: css class name applied to the sticky header
,stickyHeaders: "tablesorter-stickyHeader"
}
//*** CALLBACKS ***
//function called after tablesorter has completed initialization
, initialized: function (table) {}
//*** CSS CLASS NAMES ***
,tableClass: "tablesorter"
,cssAsc: "tablesorter-headerSortUp"
,cssDesc: "tablesorter-headerSortDown"
,cssHeader: "tablesorter-header"
,cssHeaderRow: "tablesorter-headerRow"
,cssIcon: "tablesorter-icon"
,cssChildRow: "tablesorter-childRow"
,cssInfoBlock: "tablesorter-infoOnly"
,cssProcessing: "tablesorter-processing"
//*** SELECTORS ***
//jQuery selectors used to find the header cells.
,selectorHeaders: "> thead th, > thead td"
//jQuery selector of content within selectorHeaders
//that is clickable to trigger a sort.
,selectorSort: "th, td"
//rows with this class name will be removed automatically
//before updating the table cache - used by "update",
//"addRows" and "appendCache"
,selectorRemove: "tr.remove-me"
//*** DEBUGING ***
//send messages to console
,debug: false
}).tablesorterPager({
//target the pager markup - see the HTML block below
container: $(".pager")
//use this url format "http:/mydatabase.com?page={page}&size={size}"
,ajaxUrl: null
//process ajax so that the data object is returned along with the
//total number of rows; example:
// {
// "data" : [{ "ID": 1, "Name": "Foo", "Last": "Bar" }],
// "total_rows" : 100
// }
,ajaxProcessing: function(ajax) {
if (ajax && ajax.hasOwnProperty('data')) {
// return [ "data", "total_rows" ];
return [ajax.data, ajax.total_rows];
}
}
//output string - default is '{page}/{totalPages}';
//possible variables:
//{page}, {totalPages}, {startRow}, {endRow} and {totalRows}
,output: '{startRow} to {endRow} ({totalRows})'
//apply disabled classname to the pager arrows when the rows at
//either extreme is visible - default is true
,updateArrows: true
//starting page of the pager (zero based index)
,page: 0
//Number of visible rows - default is 10
,size: 10
//if true, the table will remain the same height no matter how many
//records are displayed. The space is made up by an empty
//table row set to a height to compensate; default is false
,fixedHeight: true
//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
//css class names of pager arrows
//next page arrow
,cssNext: '.next'
//previous page arrow
,cssPrev: '.prev'
//go to first page arrow
,cssFirst: '.first'
//go to last page arrow
,cssLast: '.last'
//select dropdown to allow choosing a page
,cssGoto: '.gotoPage'
//location of where the "output" is displayed
,cssPageDisplay: '.pagedisplay'
//dropdown that sets the "size" option
,cssPageSize: '.pagesize'
//class added to arrows when at the extremes
//(i.e. prev/first arrows are "disabled" when on the first page)
//Note there is no period "." in front of this class name
,cssDisabled: 'disabled'
});
//Extend the themes to change any of the default class names ** NEW **
$.extend($.tablesorter.themes.jui
// change default jQuery uitheme icons - find the full list of icons
// here: http://jqueryui.com/themeroller/ (hover over them for their name)
,{table: 'ui-widget ui-widget-content ui-corner-all' // table classes
,header: 'ui-widget-header ui-corner-all ui-state-default' // header classes
,icons: 'ui-icon' // icon class added to the <i> in the header
,sortNone: 'ui-icon-carat-2-n-s'
,sortAsc: 'ui-icon-carat-1-n'
,sortDesc: 'ui-icon-carat-1-s'
,active: 'ui-state-active' // applied when column is sorted
,hover: 'ui-state-hover' // hover class
,filterRow: ''
,even: 'ui-widget-content' // even row zebra striping
,odd: 'ui-state-default' // odd row zebra striping
}); |
|
Ok, js error fixed. As for the other issue, the scroller is not currently compatible with the stickyheaders and resizable widgets. The scroller widget still needs a lot of work, and it is a slow process because of time limitations. |
|
Thanks for the reply. I would be happy if I could reproduce the functionality shown: At the moment, the headers don't line up properly with the rows and I don't get any horizontal scrollbar. On 29 May 2015 at 13:22, Rob G [email protected] wrote:
http://about.me/SPlatten Simon Platten |
|
Please test this last update and see if it fixes your issue. |
|
Thank you, I will try it and let you know. I downloaded the source from And have managed to get what I need working from this, will finish it off tomorrow. From the link you posted, the mentioned file: Which file does this replace? |
|
jquery.tablesorter.js + jquery.tablesorter.widgets.js = jquery.tablesorter.combined.js The combined file will also include any selected parsers if you use a customized grunt build. |
|
Thanks again, will let you know. Commented out jquery.tablesorter.js and jquery.tablesorter.widgets.js and replaced with jquery.tablesorter.combine.js As far as I can tell it works perfectly with no warnings or errors. Thank you! |
I have been working on a table report and updated the jquery scripts to versions:
jquery-ui, v1.11.3
jquery-2.0.2
jquery.tablesorter, v1.2.6
jquery.tablesorter.widgets, v2.22.1
jquery.tablesorter.pager, v2.22.0
My set-up/initialisation script looks like this:
Problem is I don't see the images for changing the sort order, the img tags are not present in the document.
What haven't I done?
The text was updated successfully, but these errors were encountered: