{"id":48304470,"url":"https://github.com/isg-software/tablesorter-pagercontrols","last_synced_at":"2026-04-04T23:55:58.337Z","repository":{"id":57376321,"uuid":"77474007","full_name":"isg-software/tablesorter-pagercontrols","owner":"isg-software","description":"Add-on for tablesorter's pager plug-in","archived":false,"fork":false,"pushed_at":"2023-09-25T15:09:32.000Z","size":190,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-09-23T18:59:34.716Z","etag":null,"topics":["jquery-plugin","pager","tablesorter"],"latest_commit_sha":null,"homepage":"https://www.isg-software.de/tspagercontrols/indexe.html","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-2-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/isg-software.png","metadata":{"files":{"readme":"README.html","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2016-12-27T18:08:55.000Z","updated_at":"2023-09-22T14:15:21.000Z","dependencies_parsed_at":"2022-09-06T05:30:32.552Z","dependency_job_id":"e8d8df6f-a877-4f9e-aa83-7c24e597e5bf","html_url":"https://github.com/isg-software/tablesorter-pagercontrols","commit_stats":{"total_commits":51,"total_committers":2,"mean_commits":25.5,"dds":"0.11764705882352944","last_synced_commit":"69a195f23b09b01e4e913b7509de78bdbe6a954e"},"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"purl":"pkg:github/isg-software/tablesorter-pagercontrols","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/isg-software%2Ftablesorter-pagercontrols","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/isg-software%2Ftablesorter-pagercontrols/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/isg-software%2Ftablesorter-pagercontrols/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/isg-software%2Ftablesorter-pagercontrols/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/isg-software","download_url":"https://codeload.github.com/isg-software/tablesorter-pagercontrols/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/isg-software%2Ftablesorter-pagercontrols/sbom","scorecard":{"id":495404,"data":{"date":"2025-08-11","repo":{"name":"github.com/isg-software/tablesorter-pagercontrols","commit":"057b97340d343e7470d87c1d55d25ec49f0a11f2"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":3,"checks":[{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"SAST","score":0,"reason":"no SAST tool detected","details":["Warn: no pull requests merged into dev branch"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Code-Review","score":0,"reason":"Found 0/30 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: BSD 2-Clause \"Simplified\" License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-19T20:19:53.111Z","repository_id":57376321,"created_at":"2025-08-19T20:19:53.111Z","updated_at":"2025-08-19T20:19:53.111Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31419548,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-04T20:09:54.854Z","status":"ssl_error","status_checked_at":"2026-04-04T20:09:44.350Z","response_time":60,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["jquery-plugin","pager","tablesorter"],"created_at":"2026-04-04T23:55:58.093Z","updated_at":"2026-04-04T23:55:58.320Z","avatar_url":"https://github.com/isg-software.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!DOCTYPE html\u003e\n\u003chtml xmlns=\"http://www.w3.org/1999/xhtml\" lang=\"en\"\u003e\n\u003chead\u003e\n\t\u003cmeta charset=\"utf-8\"/\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\n\u003ch1 id=\"tablesorter-pagercontrols\"\u003etablesorter-pagercontrols\u003c/h1\u003e\n\n\u003cp\u003eThis jQuery plug-in is an add-on for \u003ca href=\"https://github.com/Mottie/tablesorter\"\u003emottie\u0026#8217;s tablesorter plug-in\u003c/a\u003e, more explicitly its pager add-on. It programmatically adds pager controls below a table and applies the pager add-on for large HTML tables, so that you don\u0026#8217;t have to insert the controls to the HTML manually any more.\u003c/p\u003e\n\n\u003cp\u003e\u003ca href=\"https://www.isg-software.de/tspagercontrols/indexe.html\"\u003eProject Home Page\u003c/a\u003e\u003c/p\u003e\n\n\u003ch2 id=\"whatsnew\"\u003eWhat\u0026#8217;s new?\u003c/h2\u003e\n\n\u003cp\u003eV1.6 (Sept. 2023):\u003c/p\u003e\n\n\u003cul\u003e\n\u003cli\u003eintroduced Aria-Labels to the pager buttons for better accessibility,\u003c/li\u003e\n\u003cli\u003eintroduced new option \u003ccode\u003ebuttonLabelClass\u003c/code\u003e,\u003c/li\u003e\n\u003cli\u003eadded new classes \u003ccode\u003eflipLeft\u003c/code\u003e and \u003ccode\u003erotateLeft\u003c/code\u003e to default CSS which both can be used as values for the new \u003ccode\u003ebuttonLabelClass\u003c/code\u003e option if the button label for the left buttons (first and prev) are in fact right-pointing arrows of some kind,\u003c/li\u003e\n\u003cli\u003eupdated the template \u003ccode\u003etriangleIcons\u003c/code\u003e to use the same right-pointing arrow icon for all button labels and flip the left buttons using the aforementioned options and class.\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003cp\u003eV1.5 (Sept. 2023): Introduced the additional options \u003ccode\u003eforcePager\u003c/code\u003e and \u003ccode\u003epagerOptions\u003c/code\u003e, see default options below. These were mainly added in order to support Ajax-based Pagers.\u003c/p\u003e\n\n\u003ch2 id=\"motivation\"\u003eMotivation\u003c/h2\u003e\n\n\u003cp\u003eThe “normal” usage of the tablesorter\u0026#8217;s pager add-on requires you to manually create a user interface (control buttons to skip pages, page size selection and page display) in your HTML document (in addition to the table). The following HTML fragment is taken from an original example page:\u003c/p\u003e\n\n\u003cpre\u003e\u003ccode class=\"html\"\u003e\u0026lt;table class=\u0026quot;tablesorter\u0026quot;\u0026gt;\n\u0026lt;!-- view page source to see the entire table --\u0026gt;\n\u0026lt;/table\u0026gt;\n\n\u0026lt;!-- pager --\u0026gt;\n\u0026lt;div id=\u0026quot;pager\u0026quot; class=\u0026quot;pager\u0026quot;\u0026gt;\n  \u0026lt;form\u0026gt;\n    \u0026lt;img src=\u0026quot;first.png\u0026quot; class=\u0026quot;first\u0026quot;/\u0026gt;\n    \u0026lt;img src=\u0026quot;prev.png\u0026quot; class=\u0026quot;prev\u0026quot;/\u0026gt;\n    \u0026lt;!-- the \u0026quot;pagedisplay\u0026quot; can be any element, including an input --\u0026gt;\n    \u0026lt;span class=\u0026quot;pagedisplay\u0026quot; data-pager-output-filtered=\u0026quot;{startRow:input} \u0026amp;ndash; {endRow} / {filteredRows} of {totalRows} total rows\u0026quot;\u0026gt;\u0026lt;/span\u0026gt;\n    \u0026lt;img src=\u0026quot;next.png\u0026quot; class=\u0026quot;next\u0026quot;/\u0026gt;\n    \u0026lt;img src=\u0026quot;last.png\u0026quot; class=\u0026quot;last\u0026quot;/\u0026gt;\n    \u0026lt;select class=\u0026quot;pagesize\u0026quot;\u0026gt;\n      \u0026lt;option value=\u0026quot;10\u0026quot;\u0026gt;10\u0026lt;/option\u0026gt;\n      \u0026lt;option value=\u0026quot;20\u0026quot;\u0026gt;20\u0026lt;/option\u0026gt;\n      \u0026lt;option value=\u0026quot;30\u0026quot;\u0026gt;30\u0026lt;/option\u0026gt;\n      \u0026lt;option value=\u0026quot;40\u0026quot;\u0026gt;40\u0026lt;/option\u0026gt;\n      \u0026lt;option value=\u0026quot;all\u0026quot;\u0026gt;All Rows\u0026lt;/option\u0026gt;\n    \u0026lt;/select\u0026gt;\n  \u0026lt;/form\u0026gt;\n\u0026lt;/div\u0026gt;\n\u003c/code\u003e\u003c/pre\u003e\n\n\u003cp\u003eWhen calling the \u003ccode\u003etablesorterPager\u003c/code\u003e plug-in, you may then “connect” these controls with the pager by setting corresponding options to the classes of the controls. This way, the plug-in is “wired” to your controls and adds the application logic to your UI.\u003c/p\u003e\n\n\u003cp\u003eWhile that is a clear separation of logic (in javascript) and user interface (in HTML) and offers you great freedom of UI design, I personally was looking for a solution which (just like the main \u003ccode\u003etablesorter\u003c/code\u003e functionality) is directly applicable to any table in my web application\u0026#8217;s output without requiring the web app itself to include controls into its output.\u003c/p\u003e\n\n\u003cp\u003eSo, the goal of \u003cem\u003ethis\u003c/em\u003e plug-in is to get rid of pager-specific HTML mark-up in the document. If you, too, want to dynamically apply a table sorter and pager to one or more tables inside some HTML document via JavaScript, while the HTML really only holds the data table, have a look at this plug-in.\u003c/p\u003e\n\n\u003cp\u003eInstead of manually adding controls like those shown above to your HTML document and calling the \u003ccode\u003etablesorterPager\u003c/code\u003e plug-in, you simply call this \u003ccode\u003eappendTablesorterPagerControls\u003c/code\u003e plug-in on your jQuery resultset. It automatically appends a \u003ccode\u003ediv\u003c/code\u003e element beneath the table holding the default controls and then internally applies the \u003ccode\u003etablesorterPager\u003c/code\u003e, ‘wiring’ it to the inserted controls.\u003c/p\u003e\n\n\u003ch2 id=\"features\"\u003eFeatures\u003c/h2\u003e\n\n\u003cul\u003e\n\u003cli\u003eChecks whether the table is larger than the smallest page size option. Only adds the pager if that\u0026#8217;s the case, i.e. non-pageable tables will not be equipped with a useless pager.\n\n\u003cul\u003e\n\u003cli\u003eThis can now be overruled by the option \u003ccode\u003eforcePager: true\u003c/code\u003e, if you want to insert the pager regardless of the table size. This is especially useful if you insert an empty table and want it to be filled by partial data via Ajax requests (which is am optional feature of the Tablesorter Pager Plug-in).\u003c/li\u003e\n\u003c/ul\u003e\u003c/li\u003e\n\u003cli\u003eIn difference to the typical examples like the source code shown above, this plug-in does not insert images but real HTML 5 buttons (\u003ccode\u003e\u0026lt;button\u0026gt;…\u0026lt;/button\u0026gt;\u003c/code\u003e elements).\n\n\u003cul\u003e\n\u003cli\u003eBy default these look like any button of the user\u0026#8217;s OS, but the buttons can also be styled. This plug-in contains a \u003ccode\u003epillbuttons.css\u003c/code\u003e stylesheet demonstrating styling capabilities by creating flat buttons with hover effect shaped with semicircles on the left- and righthand side.\u003c/li\u003e\n\u003cli\u003eUnavailable buttons (previous/first page buttons on page one or next/last page buttons on the last page) get disabled.\u003c/li\u003e\n\u003c/ul\u003e\u003c/li\u003e\n\u003cli\u003eButton labels are configurable via options.\u003c/li\u003e\n\u003cli\u003eAll controls support tooltips (via the \u003ccode\u003etitle\u003c/code\u003e attribute).\n\n\u003cul\u003e\n\u003cli\u003eDefault tooltips are available in english or german.\u003c/li\u003e\n\u003cli\u003eOn source level, tooltips are defined in separate scripts files for easy localization.\u003c/li\u003e\n\u003cli\u003eTooltips may also be overridden locally via the plug-in options.\u003c/li\u003e\n\u003c/ul\u003e\u003c/li\u003e\n\u003cli\u003eMore options include selectable page sizes, initial page size and CSS class names for the generated HTML elements.\u003c/li\u003e\n\u003cli\u003eThe page display element may be \u003cem\u003eeither\u003c/em\u003e\n\n\u003cul\u003e\n\u003cli\u003ea disabled text input element (sporting fixed width and the standard form font also used for the button labels and page size select box) \u003cem\u003eor\u003c/em\u003e\u003c/li\u003e\n\u003cli\u003enormal document text.\n\n\u003cul\u003e\n\u003cli\u003eOnly in this case, the following pager plug-in\u0026#8217;s optional feature is available: The current page number and/or current number of the first line may be inserted as input fields. The user can then enter a number and press return in order to directly switch to the desired page (resp. page holding the desired line).\u003c/li\u003e\n\u003c/ul\u003e\u003c/li\u003e\n\u003c/ul\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003ch2 id=\"dependencies\"\u003eDependencies\u003c/h2\u003e\n\n\u003cul\u003e\n\u003cli\u003eNeeds \u003ca href=\"https://www.npmjs.com/package/tablesorter\"\u003etablesorter\u003c/a\u003e. Tested with 2.28.4, and requires at least this version for the option \u003ccode\u003eoutputFiltered\u003c/code\u003e to work. If you don\u0026#8217;t use the filter widget or you don\u0026#8217;t need a different page display for filtered tables, this should also be compatible with earlier versions of tablesorter.\u003c/li\u003e\n\u003cli\u003eNeeds \u003ca href=\"https://www.npmjs.com/package/jquery\"\u003ejQuery\u003c/a\u003e. Tested with jQuery 3 (the NPM module definces a dependency to jquery V3.x.x), but should also be compatible with some earlier versions.\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003ch2 id=\"usage\"\u003eUsage\u003c/h2\u003e\n\n\u003cp\u003eInclude the script files for jQuery, tablesorter, the pager and this plug-in to your HTML as well as the desired CSS files (you may use the bundled style sheets or create your own).\u003c/p\u003e\n\n\u003cp\u003eSelect your tables via jQuery and apply the \u003ccode\u003etablesorter\u003c/code\u003e and \u003ccode\u003eappendTablesorterPagerControls\u003c/code\u003e (instead of \u003ccode\u003etablesorterPager\u003c/code\u003e) to the result set.\u003c/p\u003e\n\n\u003cp\u003eYour HTML\u0026#8217;s head might look like this:\u003c/p\u003e\n\n\u003cpre\u003e\u003ccode class=\"html\"\u003e\u0026lt;!DOCTYPE html\u0026gt;\n\u0026lt;html\u0026gt;\n\u0026lt;head\u0026gt;\n    \u0026lt;title\u0026gt;…\u0026lt;/title\u0026gt;\n    \u0026lt;meta charset=\u0026quot;utf-8\u0026quot;\u0026gt;\n    \u0026lt;link rel=\u0026quot;stylesheet\u0026quot; href=\u0026quot;node_modules/tablesorter/dist/css/theme.blue.css\u0026quot; type=\u0026quot;text/css\u0026quot;\u0026gt;\n    \n    \u0026lt;script type=\u0026quot;text/javascript\u0026quot; src=\u0026quot;node_modules/jquery/dist/jquery.js\u0026quot;\u0026gt;\u0026lt;/script\u0026gt;\n    \u0026lt;script type=\u0026quot;text/javascript\u0026quot; src=\u0026quot;node_modules/tablesorter/dist/js/jquery.tablesorter.min.js\u0026quot;\u0026gt;\u0026lt;/script\u0026gt;\n    \u0026lt;script type=\u0026quot;text/javascript\u0026quot; src=\u0026quot;node_modules/tablesorter/dist/js/extras/jquery.tablesorter.pager.min.js\u0026quot;\u0026gt;\u0026lt;/script\u0026gt;\n    \u0026lt;script type=\u0026quot;text/javascript\u0026quot; src=\u0026quot;js/jquery.tablesorter.pager.appendcontrols.english.min.js\u0026quot;\u0026gt;\u0026lt;/script\u0026gt;\n    \u0026lt;link rel=\u0026quot;stylesheet\u0026quot; href=\u0026quot;css/jquery.tablesorter.pager.appendcontrols.css\u0026quot; type=\u0026quot;text/css\u0026quot;\u0026gt;\n    \n    \u0026lt;script type=\u0026quot;text/javascript\u0026quot;\u0026gt;\n        $(function() {\n            $(\u0026quot;table\u0026quot;)\n                .tablesorter({widthFixed: true, widgets: ['zebra']})\n                .appendTablesorterPagerControls();\n        });\n    \u0026lt;/script\u0026gt;\n\u0026lt;/head\u0026gt;\n\u003c/code\u003e\u003c/pre\u003e\n\n\u003cp\u003eThe minified (distribution) script files include the main plug-in code as well as the tooltip definitions in one language. Therefore you\u0026#8217;ll find the script file in different versions, named after the tooltip language.\u003c/p\u003e\n\n\u003cp\u003eIf you want to include the unminified source scripts (e.g. for debugging purposes or if you\u0026#8217;ve created a new language file and not yet compiled a new distribution file using it), you\u0026#8217;ll have to first load the main script file (\u003ccode\u003ejquery.tablesorter.pager.appendcontrols.js\u003c/code\u003e) followed by the various other files like \u003ccode\u003edefaults.js\u003c/code\u003e and lastly the language pack file (e.g. \u003ccode\u003ejquery.tablesorter.pager.appendcontrols.english.js\u003c/code\u003e).\u003c/p\u003e\n\n\u003cp\u003eThe \u003ccode\u003eappendTablesorterPagerControls()\u003c/code\u003e method optionally takes one or more objects as arguments which each may override default options. This means:\u003c/p\u003e\n\n\u003cul\u003e\n\u003cli\u003eCalling the function without arguments applies the default options,\u003c/li\u003e\n\u003cli\u003ecalling the function with one argument, this has to be an option containing all those options which you want to differ from the defaults.\u003c/li\u003e\n\u003cli\u003eIf you call the function with more than one argument (e.g. one object with user-defined options and one or more so-called templates, globally defined option sets overriding some specific options), all these options objects will be merged into a copy of the defaults. I.e. the options in the first argument override defaults, options in the second argument may override options of the first argument and so on.\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003cp\u003eThe default options are defined as follows (and may also be globally overwritten):\u003c/p\u003e\n\n\u003cpre\u003e\u003ccode class=\"javascript\"\u003e$.fn.appendTablesorterPagerControls.defaults = {\n\t/**\n\t * The table sizes (number of visible rows) selectable by the user. \n\t * Array of numbers, must be sorted (ascending) and not empty.\n\t */\n\tsizes: [20, 30, 40, 50, 100],\n\t/**\n\t * Initial table size.\n\t * This must be a single element (number) of the sizes array to be preselected \n\t * when loading the page / applying the plug-ing.\n\t */\n\tinitialSize: 20,\n\t/**\n\t * Prefix string used for generated element IDs.\n\t * The ID for the DIV element holding the pager controls will consist of this prefix plus a number.\n\t * Form elements within that DIV will get an ID starting identically, but with a further suffix:\n\t * \u0026quot;sel\u0026quot; for the table size select box and \u0026quot;pgnr\u0026quot; for the input with the page number display.\n\t */\n\tprefix: \u0026quot;tableSorterPager\u0026quot;,\n\t/**\n\t * Pattern for the arrangement of the control elements. \n\t * {first}, {prev}, {next}, and {last} are placeholders for the navigation buttons,\n\t * {size} will be replaced with the select box for selecting the number of visible rows,\n\t * {display} stands for the status display as formatted with the output option.\n\t */\n\tcontrolsOutput: '{first}{prev}{display}{next}{last}{size}',\n\t/**\n\t * This output option is passed directly to the tablesorter pager plug-in. \n\t * Defines the pattern of information to be displayed in the page display.\n\t * (For details see the pager documentation.)\n\t * Please note, that if you change this pattern, it's recommended to also change the\n\t * corresponding tooltip text (see language-specific files).\n\t */\n\toutput: '{page}/{totalPages} ({startRow}-{endRow}/{totalRows})',\n\t/**\n\t * second output pattern only used when the 'filter' widget is applied to the table and the user\n\t * entered a filter, i.e. the table does not show all rows.\n\t * If null, the output pattern will not change for filtered tables. But you may use this option\n\t * to define a separate output pattern containing the {filteredRows} or {filteredPages} placeholders.\n\t */\n\toutputFiltered: null,\n\t/**\n\t * Size (width) for the input holding the page display. You may change this option \n\t * corresponding to the output option.\n\t * Or set to 0 or null in order to disable the input field completely and render the display\n\t * as styleable text (in a span field).\n\t */\n\tpagedisplayInputSize: null,\n\t/**\n\t * CSS class for the 'next page' button, defaults to 'next'.\n\t */\n\tclassNext: \u0026quot;next\u0026quot;,\n\t/**\n\t * CSS class for the 'previous page' button, defaults to 'prev'.\n\t */\n\tclassPrev: \u0026quot;prev\u0026quot;,\n\t/**\n\t * CSS class for the 'first page' button, defaults to 'first'.\n\t */\n\tclassFirst: \u0026quot;first\u0026quot;,\n\t/**\n\t * CSS class for the 'last page' button, defaults to 'last'.\n\t */\n\tclassLast: \u0026quot;last\u0026quot;,\n\t/**\n\t * CSS class for the span or input for displaying the current page, page count etc. (see output option for formatting this display).\n\t * Defaults to 'pagedisplay'.\n\t * NOTE: If you change this value, the included CSS files will not work completely, but will have to be adapted to the new class name.\n\t */\n\tclassPagedisplay: \u0026quot;pagedisplay\u0026quot;,\n\t/**\n\t * CSS class for the page size selection (select element, defaults to 'pagesize').\n\t */\n\tclassPagesize: \u0026quot;pagesize\u0026quot;,\n\t/**\n\t * CSS class for a div element wrapped around the table and its pager controls. \n\t * Defaults to 'tablesorterPagerWrapper'.\n\t * May also be space-separated list of class names like in any class attribute of an HTML element.\n\t */\n\tclassWrapper: \u0026quot;tablesorterPagerWrapper\u0026quot;,\n\t/**\n\t * CSS class for a div element wrapped around the table and its pager controls within the\n\t * wrapper of class 'classWrapper'. Defaults to null, in which case no inner wrapper is added.\n\t * If non-null, the table and its conrols will be wrapped doubly like:\n\t * \u0026lt;div class='classWrapper'\u0026gt;\u0026lt;div class='classInnerWrapper'\u0026gt;\u0026lt;table\u0026gt;...\u0026lt;/table\u0026gt;\u0026lt;div class='classControls'\u0026gt;...\u0026lt;/div\u0026gt;\u0026lt;/div\u0026gt;\u0026lt;/div\u0026gt;.\n\t * By default, this inner div won't be added, but it can be used for some CSS tricks: So the outer wrapper\n\t * may be displayed as a block while the inner's display style may be set to 'inline-block' which\n\t * allows for example to align the controls to the right with the table even if the table is not full-width.\n\t * May also be space-separated list of class names like in any class attribute of an HTML element.\n\t */\n\tclassInnerWrapper: null,\n\t/**\n\t * CSS class for a div element wrapped around the table only (inside the optional innerWrapper).\n\t * Defaults to null, in which case no such table wrapper is added.\n\t * If non-null, the table will be wrapped like this:\n\t * \u0026lt;div class='classWrapper'\u0026gt;\u0026lt;div class='classTableWrapper'\u0026gt;\u0026lt;table\u0026gt;...\u0026lt;/table\u0026gt;\u0026lt;/div\u0026gt;\u0026lt;div class='classControls'\u0026gt;...\u0026lt;/div\u0026gt;\u0026lt;/div\u0026gt;.\n\t * Or, if the classInnerWrapper is also non-null:\n\t * \u0026lt;div class='classWrapper'\u0026gt;\u0026lt;div class='classInnerWrapper'\u0026gt;\u0026lt;div class='classTableWrapper'\u0026gt;\u0026lt;table\u0026gt;...\u0026lt;/table\u0026gt;\u0026lt;/div\u0026gt;\u0026lt;div class='classControls'\u0026gt;...\u0026lt;/div\u0026gt;\u0026lt;/div\u0026gt;\u0026lt;/div\u0026gt;.\n\t * So, by default this table wrapper won't be added, but it may be added for some CSS formatting.\n\t * It's especially useful if you may have very wide table and want them to be horizontally scrollable.\n\t * In this case, you may set this option and introduce a CSS rule setting overflow-x: scroll for the table wrapper.\n\t * That way, the table itself will be scrollable (if wider that the viewport) while the table pager controls beneath\n\t * it (as well as content above the table or beneath the pager controls) will stay fixed and won't scroll left or right\n\t * with the table, i.e. the user will always see and will always be able to operate the pager regardless of\n\t * the horizontal scroll position of the table.\n\t */\n\tclassTableWrapper: null,\n\t/**\n\t * CSS class for a div element containing the table pager controls (inserted below the table). \n\t * Defaults to 'tablesorterPagerControls'.\n\t * NOTE: If you change this value, the included CSS files will not work completely, but will have to be adapted to the new class name.\n\t */\n\tclassControls: \u0026quot;tablesorterPagerControls\u0026quot;,\n\t/**\n\t * button label for the 'first page' button.\n\t */\n\tlabelFirst: \u0026quot;\u0026amp;lt;\u0026amp;lt;\u0026quot;,\n\t/**\n\t * button label for the 'previous page' button.\n\t */\n\tlabelPrev: \u0026quot;\u0026amp;lt;\u0026quot;,\n\t/**\n\t * button label for the 'next page' button.\n\t */\n\tlabelNext: \u0026quot;\u0026amp;gt;\u0026quot;,\n\t/**\n\t * button label for the 'last page' button.\n\t */\n\tlabelLast: \u0026quot;\u0026amp;gt;\u0026amp;gt;\u0026quot;,\n\t/**\n\t * If this is a string, each button label will be wrapped in a span with a class attribute, and this property defines\n\t * the latter's value.\n\t * This may e.g. be used to add the class \u0026quot;flipLeft\u0026quot; to each button label. The default CSS will then horizontally flip\n\t * these button labels for the left two buttons (prev and first).\n\t * Alternatively, you may use the class \u0026quot;rotateLeft\u0026quot;, which will by default rotate the button labels of the prev- and first-\n\t * buttons by 180 degrees.\n\t */\n\tbuttonLabelClass: null,\n\t/**\n\t * If false, pager buttons are only added to a table if that table contains more rows than\n\t * the smallest page size (i.e. actual row count \u0026lt; sizes[0]).\n\t * Set this to true to force appending pager controls regardless of actual table size (e.g. if the\n\t * table is still empty and will be populated via ajax requests).\n\t */\n\tforcePager: false,\n\t/**\n\t * Any properties of this object will be passed directly to the original tablesorterPager plugin.\n\t * This is empty by default, as usually all needed pager options are automatically generated by this plug-in.\n\t * May be used, e.g., to add ajax options (ajaxUrl, ajaxProcessing, etc.).\n\t */\n\tpagerOptions: {}\n};\n\u003c/code\u003e\u003c/pre\u003e\n\n\u003cp\u003e\u003ca href=\"src/js/defaults.js\"\u003edefaults.js\u003c/a\u003e\u003c/p\u003e\n\n\u003cp\u003eAs you can see in the example call above, you don\u0026#8217;t apply the tablesorter\u0026#8217;s pager plug-in directly, but you only apply the \u003ccode\u003etablesorter()\u003c/code\u003e plug-in method, followed directly by the \u003ccode\u003eappendTablesorterPagerControls()\u003c/code\u003e call. The latter will apply the \u003ccode\u003etablesorterPager()\u003c/code\u003e-call automatically for you. The options to this \u003ccode\u003etablesorterPager()\u003c/code\u003e are calculated by this plug-in.\u003c/p\u003e\n\n\u003cp\u003eThere might be situations where you want to specify your own options to pass to \u003ccode\u003etablesorterPager()\u003c/code\u003e, like e.g. several of the \u003ccode\u003eajax*\u003c/code\u003e properties which enable getting pages of table rows via Ajax calls from a server. You can now do so by collecting these in the \u003ccode\u003epagerOptions\u003c/code\u003e property. Such a call would thus look something like this:\u003c/p\u003e\n\n\u003cpre\u003e\u003ccode class=\"javascript\"\u003e$(\u0026quot;table\u0026quot;)\n    .tablesorter({\n        … options for tablesorter …\n    })\n    .appendTablesorterPagerControls({\n        … options for appendTablesorterPagerControls …\n        pagerOptions: {\n            … additional options for tablesorterPager …\n            (besides those automatically calculated)\n        }\n    });\n\u003c/code\u003e\u003c/pre\u003e\n\n\u003ch3 id=\"templates\"\u003eTemplates\u003c/h3\u003e\n\n\u003cp\u003eAs said, you may call the jQuery plug-in with an object as argument holding those options you wish to override. If you want to repeatedly override a whole subset of options, you may aggregate these into template objects.\nFour predefined templates are included, see \u003ca href=\"src/js/templates.js\"\u003etemplates.js\u003c/a\u003e.\u003c/p\u003e\n\n\u003cp\u003eThe application of these templates is demonstrated in the examples.\u003c/p\u003e\n\n\u003ch2 id=\"examples\"\u003eExamples\u003c/h2\u003e\n\n\u003cp\u003eIf you download the package from GitHub or NPM, you\u0026#8217;ll find it includes some example pages.\u003c/p\u003e\n\n\u003cp\u003eOnline views of these examples can also be found on the \u003ca href=\"https://www.isg-software.de/tspagercontrols/indexe.html\"\u003eproject\u0026#8217;s home page\u003c/a\u003e.\u003c/p\u003e\n\n\u003ch2 id=\"license:bsd2-clause\"\u003eLicense: BSD 2-clause\u003c/h2\u003e\n\n\u003cp\u003eCopyright (c) 2023, Immo Schulz-Gerlach, www.isg-software.de\u003cbr /\u003e\nAll rights reserved.\u003c/p\u003e\n\n\u003cp\u003eRedistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:\u003c/p\u003e\n\n\u003col\u003e\n\u003cli\u003e\u003cp\u003eRedistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.\u003c/p\u003e\u003c/li\u003e\n\u003cli\u003e\u003cp\u003eRedistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.\u003c/p\u003e\u003c/li\u003e\n\u003c/ol\u003e\n\n\u003cp\u003eTHIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS \u0026#8220;AS IS\u0026#8221; AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.\u003c/p\u003e\n\n\u003c/body\u003e\n\u003c/html\u003e\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fisg-software%2Ftablesorter-pagercontrols","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fisg-software%2Ftablesorter-pagercontrols","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fisg-software%2Ftablesorter-pagercontrols/lists"}