jsTableSorter plugin does not implement styling

I'm having an issue with the application of the jsTableSorter plug-in using the Blue theme. The code I'm using doesn't seem to be applying the style correctly. Can someone help me troubleshoot this problem?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="shortcut icon" href="http://i56.servimg.com/u/f56/18/49/06/85/pcicon10.png" />
    <title>
      PokéClub! Ranking
    </title>
    <link rel="stylesheet" type="text/css" href="http://dl.dropboxusercontent.com/s/5sckq157asnl68z/pcranking.css" />    
    <link rel="stylesheet" type="text/css" href="http://dl.dropboxusercontent.com/s/799k8f76ukikxa8/style.css" />
    <script type="text/javascript" src="http://dl.dropboxusercontent.com/s/5c8cuzcww0bjua4/jquery-latest.js"></script>
    <script type="text/javascript" src="http://dl.dropboxusercontent.com/s/2gbxvhkskdsch5p/jquery.tablesorter.js"></script>
    <script type="text/javascript">
      [Insert JavaScript code here]
    </script>
  </head>
  <body>
    [Insert HTML body content here]
  </body>
</html>

.......................................................................................

javascripttablesorter

Answer №1

Your jQuery is currently v1.4.2 and your tableSorter version is 2.05b, but it seems like your CSS is missing some parts. If you don't necessarily need to stick with those versions, here is a solution:

Update the following lines:

<link rel="stylesheet" type="text/css" href="http://dl.dropboxusercontent.com/s/799k8f76ukikxa8/style.css" />
<script type="text/javascript" src="http://dl.dropboxusercontent.com/s/5c8cuzcww0bjua4/jquery-latest.js"></script>
<script type="text/javascript" src="http://dl.dropboxusercontent.com/s/2gbxvhkskdsch5p/jquery.tablesorter.js"></script>

Replace them with:

<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.17.1/css/theme.blue.css">    
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.17.1/jquery.tablesorter.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.17.1/jquery.tablesorter.widgets.min.js"></script>

Also, change this line:

theme: 'default',

To:

theme: 'blue',

This will update to the latest versions from a CDN and change the theme name as indicated in the comment.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the syntax for defining parameters in an overloaded arrow function in TypeScript?

Trying to create an async arrow function that can handle a single image object or an array of image objects. I'm new to TypeScript overloading and may be approaching this the wrong way. Here's what I've come up with: type ImageType = { ...

javascripttypescript

Unable to retrieve the correct `this` value within an axios callback

Feeling a bit fuzzy-brained at the moment. I've put together this code that downloads a JSON from a URL and displays it on the screen: export default class App extends React.Component { constructor(props) { super(props); this.state = { data: [], } } ...

javascriptjsonreactjsaxios

KendokendoNumericTextBox Unable to assign a value

After upgrading to the latest version of Kendo 2020, everything seems to be working smoothly except for the kendonumerictextbox control. I encountered an error when attempting to set a value to the kendonumerictextbox. $('#Taxes').data("kendoNu ...

javascriptjquerykendo-uikendo-asp.net-mvc

Switch the paper tab to a dropdown menu in Polymer.js

Can someone assist me in transforming the paper tab into a paper drop down menu in polymer JS? I want the drop-down to appear with a list of values when hovering over the Top menu. Activity Execution <paper-tab cla ...

javascriptnode.jsangularuser-interfacepolymer

Learn how to dynamically enable or disable the add and remove buttons in the PrimeNG PickList using Angular 2

I'm currently learning Angular 2 and I'm working on creating a dual list box using PrimeNG's pickList component (https://www.primefaces.org/primeng/#/picklist). Within the pickList, I have table data with 3 columns, along with ADD and REMO ...

javascriptangulartypescriptprimeng

How can an array be generated functionally using properties from an array of objects?

Here's the current implementation that is functioning as expected: let newList: any[] = []; for (let stuff of this.Stuff) { newList = newList.concat(stuff.food); } The "Stuff" array consists of objects where each ...

javascripttypescriptfunctional-programming

RectAreaLight in Three js does not produce any light reflection when used with MeshPhongMaterial due to lack of support for OES_texture_half

After trying to incorporate a RectAreaLight into my three.js scene where I have objects with MeshPhongMaterial, I noticed that there is no light reflection on the objects. A useful example can be found here: Link If you open the developer tools, you can s ...

javascriptreactjsthree.jswebgl

What is the best way to remove table row data fetched from an API within a table?

Can someone assist me with deleting the table tr from the user table, where data is retrieved from an API? I have attempted the code below: $("principleTable").find("tr").hide(); $("#delAgentModal").modal("hide"); ...

javascriptjqueryhtmlcss

AngularJS: Move forward with controller execution after completion of a looped service method

Currently, I am implementing a networkService in Angular which is responsible for looping while the internet connection is unavailable. The goal is to resume execution once the connection is restored. Below is an example of a controller: MyApp.controller ...

javascriptangularjscordova

Transferring scope between pages without the need for an angular service definition

Looking to open a new JSP page while passing the $scope in order to utilize an array response generated in the initial page. Example from test.js file: (function() { 'use strict'; angular .module('test', []) .control ...

javascriptangularjshtml

Give a jQuery Mobile flipswitch a new look

Currently, I am using jQuery Mobile and recently attempted to refresh a flipswitch. However, upon executing the code $("#flipEnabled").slider("refresh");, I encountered an error in the console: Uncaught Error: cannot call methods on slider prior to initial ...

javascriptjqueryjquery-mobilerefreshjquery-mobile-flipswitch

When incorporating babel-plugin-styled-components, Nextjs may encounter a mismatch error with classnames

After transferring the content of _document.js from the following styled components example and implementing the babel plugin mentioned in the styled components documentation, I am still encountering an error. _document.js import Document from 'next/ ...

javascriptreactjsnext.jsserver-side-renderingstyled-components

Attempting to modify the background hue of a Bootstrap 5 Button using javascript

I've been experimenting with changing the background color of a bootstrap 5 button using JavaScript. While I've been able to successfully change the text color with JavaScript, altering the button's color has proven to be elusive. Below is ...

javascripthtmlbootstrap-5

Activate the download upon clicking in Angular 2

One situation is the following where an icon has a click event <md-list-item *ngFor="let history of exportHistory"> <md-icon (click)="onDownloadClick(history)" md-list-avatar>file_download</md-icon> <a md-line> ...

javascriptangulartypescript

Prevent scrollbar from appearing while splash page loads

Looking for help with a script to create a splash/intro page loader. $(function(){ setTimeout(function() { $('#splash').fadeOut(500); }, 6000); }); The current script hides the intro page after 6 seconds, ...

javascriptjqueryhtmlcss

Steps for creating a sleek vertical slider with transitional effects using JavaScript and HTML

Take a look at my code snippet: <table> <tr> <td onclick="shownav()">Equations of Circle <div id="myDownnav" class="sidenav"> <a>General Info</a> <a>In Pola ...

javascripthtmljquerycss

Using Javascript or jQuery, focus on a div containing a paragraph element with a particular text

I've been struggling for hours trying to figure out how to select a div that contains a specific p element. HTML <div class="NavBar_Row_Button2"><p>DONATE</p></div> <div class="NavBar_Row_Button2"><p>CONTACT</p ...

javascriptjquery

Tips on how to update a table following each button click during an ajax request

I am encountering an issue while trying to display data in a table by clicking on a search button. The problem arises when there is no data between the specified "Fromdate - Todate" range; the error message appears correctly. However, even after entering t ...

javascriptjqueryjsonajax

Tips for defining header and parameters when using route.get in Node.js

Looking to add custom headers and parameters when using route.get in Node.js? I am trying to set a specific value for the header and pass parameter values in the API URL. router.get("/getdata", async (req, res) => { // Set custom header re ...

javascriptnode.jsexpress

Determining the height of dynamically rendered child elements in a React application

Looking for a way to dynamically adjust the heights of elements based on other element heights? Struggling with getting references to the "source" objects without ending up in an infinite loop? Here's what I've attempted so far. TimelineData cons ...

javascripthtmlreactjstypescript