Table Sorter Data

Developer
Jeanine
Size
3,347 Kb
Views
34,408
  1. Table Sorter Data Previews
  2. Table Sorter Data HTML Codes
  3. Table Sorter Data CSS Codes
  4. Table Sorter Data JS Codes

How do I make an table sorter data?

An example of using Table Sorter CDN on a table of info and FontAwesome for the toggles in the header cells.. What is a table sorter data? How do you make a table sorter data? This script and codes were developed by Jeanine on 12 September 2022, Monday.

Table Sorter Data Previews
IQ Test

Table Sorter Data - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Table Sorter Data</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container">
<h2>
See our selection of styles:
</h2> <div class="row"> <div class="col-sm-12"> <table id="tablesorter-demo" width="100%" class="tablesorter UPC"> <thead> <tr> <th>Stock Number</th> <th>Style</th> <th>MSRP</th> <th>Approximate Size</th> <th>Color</th> </tr> </thead> <tbody> <tr> <td>7401014</td> <td>D - Micro</td> <td>$19.95</td> <td>4.5" x 2.5" x 2" (11,4cm x 6,4cm x 5,1cm)</td> <td>Black</td> </tr> <tr class="alt"> <td>7410014</td> <td>D - Micro</td> <td>$22.95</td> <td>4.5" x 2.5" x 2" (11,4cm x 6,4cm x 5,1cm)</td> <td>Nature</td> </tr> <tr> <td>7401024</td> <td>D - Mini</td> <td>$19.95</td> <td>4.5" x 3" x 2" (11,4cm x 7,6cm x 5,1cm)</td> <td>Black</td> </tr> <tr class="alt"> <td>7410024</td> <td>D - Mini</td> <td>$22.95</td> <td>4.5" x 3" x 2" (11,4cm x 7,6cm x 5,1cm)</td> <td>Nature</td> </tr> <tr> <td>7401084</td> <td>D - Compact</td> <td>$19.95</td> <td>4.75" x 3.5" x 3" (12,1cm x 8.9cm x 7.6cm)</td> <td>Black</td> </tr> <tr class="alt"> <td>7410084</td> <td>D - Compact</td> <td>$22.95</td> <td>4.75" x 3.5" x 3" (12,1cm x 8.9cm x 7.6cm)</td> <td>Nature</td> </tr> <tr> <td>7401114</td> <td>D - Small</td> <td>$19.95</td> <td>4.4" x 3.5" x 3.25" (11,2cm x 8,9cm x 8,3cm)</td> <td>Black</td> </tr> <tr class="alt"> <td>7410114</td> <td>D - Small</td> <td>$22.95</td> <td>4.4" x 3.5" x 3.25" (11,2cm x 8,9cm x 8,3cm)</td> <td>Nature</td> </tr> <tr> <td>7401044</td> <td>D - Shortie</td> <td>$19.95</td> <td>4.75" x 3" x 3.75" (12,1cm x 7,6cm x 9.5cm)</td> <td>Black</td> </tr> <tr class="alt"> <td>7410044</td> <td>D - Shortie</td> <td>$22.95</td> <td>4.75" x 3" x 3.75" (12,1cm x 7,6cm x 9.5cm)</td> <td>Nature</td> </tr> <tr> <td>7401174</td> <td>D - M 4/3</td> <td>$24.95</td> <td>4.75" x 3" x 5" (12,1cm x 7,6cm x 12,7cm)</td> <td>Black</td> </tr> <tr class="alt"> <td>7410174</td> <td>D - M 4/3</td> <td>$28.75</td> <td>4.75" x 3" x 5" (12,1cm x 7,6cm x 12,7cm)</td> <td>Nature</td> </tr> <tr> <td>7401034</td> <td>D - Offset</td> <td>$19.95</td> <td>4.9" x 3.5" x 4.6" (12,5cm x 8,9cm x 11,7cm)</td> <td>Black</td> </tr> <tr class="alt"> <td>7410034</td> <td>D - Offset</td> <td>$22.95</td> <td>4.9" x 3.5" x 4.6" (12,5cm x 8,9cm x 11,7cm)</td> <td>Nature</td> </tr> <tr> <td>7401194</td> <td>D - Midsize</td> <td>$24.95</td> <td>5" x 3.75" x 6" (12,7cm x 9,5cm x 15,2cm)</td> <td>Black</td> </tr> <tr class="alt"> <td>7410194</td> <td>D - Midsize</td> <td>$28.75</td> <td>5" x 3.75" x 6" (12,7cm x 9,5cm x 15,2cm)</td> <td>Nature</td> </tr> <tr> <td>7401224</td> <td>D - Midsize Zoom</td> <td>$29.95</td> <td>5" x 3.75" x 8" (12,7cm x 9,5cm x 20,3cm)</td> <td>Black</td> </tr> <tr class="alt"> <td>7410224</td> <td>D - Midsize Zoom</td> <td>$34.50</td> <td>5" x 3.75" x 8" (12,7cm x 9,5cm x 20,3cm)</td> <td>Nature</td> </tr> <tr> <td>7401094</td> <td>D - SLR</td> <td>$24.95</td> <td>6" x 4.5" x 6" (15,2cm x 11,4cm x 15,2cm)</td> <td>Black</td> </tr> <tr class="alt"> <td>7410094</td> <td>D - SLR</td> <td>$28.75</td> <td>6" x 4.5" x 6" (15,2cm x 11,4cm x 15,2cm)</td> <td>Nature</td> </tr> <tr> <td>7401204</td> <td>D - SLR Zoom</td> <td>$29.95</td> <td>6" x 4.5" x 8" (15,2cm x 11,4cm x 20,3cm)</td> <td>Black</td> </tr> <tr class="alt"> <td>7410204</td> <td>D - SLR Zoom</td> <td>$34.50</td> <td>6" x 4.5" x 8" (15,2cm x 11,4cm x 20,3cm)</td> <td>Nature</td> </tr> <tr> <td>7401234</td> <td>D - SLR Tele</td> <td>$37.95</td> <td>6" x 4.5" x 11" (15,2cm x 11,4cm x 27,9cm)</td> <td>Black</td> </tr> <tr class="alt"> <td>7410234</td> <td>D - SLR Tele</td> <td>$41.95</td> <td>6" x 4.5" x 11" (15,2cm x 11,4cm x 27,9cm)</td> <td>Nature</td> </tr> <tr> <td>7401104</td> <td>D - Pro</td> <td>$32.95</td> <td>6" x 6.5" x 6" (15,2cm x 16,5cm x 15,2cm)</td> <td>Black</td> </tr> <tr class="alt"> <td>7410104</td> <td>D - Pro</td> <td>$37.95</td> <td>6" x 6.5" x 6" (15,2cm x 16,5cm x 15,2cm)</td> <td>Nature</td> </tr> <tr> <td>7401214</td> <td>D - Pro Zoom</td> <td>$35.95</td> <td>6" x 6.5" x 8" (15,2cm x 16,5cm x 20,3cm)</td> <td>Black</td> </tr> <tr class="alt"> <td>7410214</td> <td>D - Pro Zoom</td> <td>$39.95</td> <td>6" x 6.5" x 8" (15,2cm x 16,5cm x 20,3cm)</td> <td>Nature</td> </tr> <tr> <td>7401244</td> <td>D - Pro Tele</td> <td>$41.95</td> <td>6" x 6.5" x 11" (15,2cm x 16,5cm x 27,9cm)</td> <td>Black</td> </tr> <tr class="alt"> <td>7410244</td> <td>D - Pro Tele</td> <td>$45.95</td> <td>6" x 6.5" x 11" (15,2cm x 16,5cm x 27,9cm)</td> <td>Nature</td> </tr> </tbody> </table> </div> </div>
</div> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://optechusasite.s3.amazonaws.com/temp/redesign/jquery.tablesorter.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Table Sorter Data - Script Codes CSS Codes

/* Table */
table { border: 0; border-spacing: 0; empty-cells: show; font-size: 100%;
}
caption,
th,
td { padding: 3px 4px; vertical-align: middle; text-align: left; font-weight: normal; border: 1px solid #ccc;
}
table tr:nth-child(2n) { background-color: #EEEFF1;
}
th { font-weight: bold; cursor: pointer;
}
table.tablesorter thead tr .header:after { float: right;
}
table.tablesorter thead tr .headerSortUp,
table.tablesorter thead tr .headerSortDown { background: #005a8c; color: #fff;
}
table.tablesorter thead tr .headerSortUp:after,
table.tablesorter thead tr .headerSortDown:after { font-size: .8rem; color: #fff; float: none; display: inline; padding-left: 5px; line-height: .5rem; font-family: FontAwesome;
}
table.tablesorter thead tr .headerSortUp:after { /*content: '^';*/ content: '\f0d8';
}
table.tablesorter thead tr .headerSortDown:after { content: '\f0d7';
}

Table Sorter Data - Script Codes JS Codes

$(document).ready(function() { $("#tablesorter-demo").tablesorter({ sortList: [ [1, 0], [0,0] ] });
});
Table Sorter Data - Script Codes
Table Sorter Data - Script Codes
Home Page Home
Developer Jeanine
Username virtual
Uploaded September 12, 2022
Rating 3
Size 3,347 Kb
Views 34,408
Do you need developer help for Table Sorter Data?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Jeanine (virtual) Script Codes
Name
Simple React Template
Flexbox
Expanding Info Boxes
Font-Awesome Icon Card with heading
Parallax Cats
3 Piece Slider
Bootstrap 4
3 Piece Slider with featured center
Simple Event Box
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!