232 lines
7.7 KiB
HTML
232 lines
7.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>jQuery plugin: Tablesorter 2.4 - Themes</title>
|
|
|
|
<!-- demo css -->
|
|
<style>
|
|
.minitable {float:left;min-width:190px; min-height: 280px; margin:5px;}
|
|
.minitable table {width:175px;margin:10px auto;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
|
|
.minitable table th {font-size:11px;}
|
|
.minitable table td {font-size:11px;padding:4px !important;text-align:center;}
|
|
.minitable h3 {text-align:center;text-transform:capitalize;}
|
|
</style>
|
|
|
|
<!-- jQuery -->
|
|
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
|
|
|
|
<!-- Tablesorter themes -->
|
|
<!-- jquery ui -->
|
|
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/cupertino/jquery-ui.css" rel="stylesheet">
|
|
<link href="../css/theme.jui.css" rel="stylesheet">
|
|
|
|
<!-- bootstrap -->
|
|
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="../css/theme.bootstrap.css" rel="stylesheet">
|
|
|
|
<!-- more themes -->
|
|
<link href="../css/theme.black-ice.css" rel="stylesheet">
|
|
<link href="../css/theme.blue.css" rel="stylesheet">
|
|
<link href="../css/theme.dark.css" rel="stylesheet">
|
|
<link href="../css/theme.default.css" rel="stylesheet">
|
|
<link href="../css/theme.dropbox.css" rel="stylesheet">
|
|
<link href="../css/theme.green.css" rel="stylesheet">
|
|
<link href="../css/theme.grey.css" rel="stylesheet">
|
|
<link href="../css/theme.ice.css" rel="stylesheet">
|
|
|
|
<!-- Tablesorter: required -->
|
|
<script src="../js/jquery.tablesorter.js"></script>
|
|
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
|
|
|
<script>
|
|
$(function() {
|
|
|
|
$.extend($.tablesorter.defaults, {
|
|
widthFixed: true,
|
|
widgets : ['zebra','columns'],
|
|
sortList : [ [0,0],[1,0],[2,0] ]
|
|
});
|
|
|
|
$('.demo').tablesorter();
|
|
|
|
// grey & dropbox themes need the {icon} for header icons
|
|
$('.tablesorter-dropbox,.tablesorter-grey').tablesorter({
|
|
headerTemplate: '{content}{icon}' // dropbox theme doesn't like a space between the content & icon
|
|
});
|
|
|
|
$('.tablesorter-bootstrap').tablesorter({
|
|
theme : 'bootstrap',
|
|
headerTemplate: '{content} {icon}',
|
|
widgets : ['zebra','columns', 'uitheme']
|
|
});
|
|
|
|
$('.tablesorter-jui').tablesorter({
|
|
theme : 'jui',
|
|
headerTemplate: '{content} {icon}',
|
|
widgets : ['zebra','columns', 'uitheme']
|
|
});
|
|
|
|
});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="main">
|
|
|
|
<div class="minitable">
|
|
<h3>blackice</h3>
|
|
<table class="demo tablesorter-blackice">
|
|
<thead><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></thead>
|
|
<tfoot><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></tfoot>
|
|
<tbody>
|
|
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
|
|
<tr><td>14</td><td>15</td><td>16</td><td>5</td></tr>
|
|
<tr><td>13</td><td>20</td><td>17</td><td>6</td></tr>
|
|
<tr><td>12</td><td>19</td><td>18</td><td>7</td></tr>
|
|
<tr><td>11</td><td>10</td><td>9</td><td>8</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="minitable">
|
|
<h3>blue</h3>
|
|
<table class="demo tablesorter-blue">
|
|
<thead><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></thead>
|
|
<tfoot><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></tfoot>
|
|
<tbody>
|
|
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
|
|
<tr><td>14</td><td>15</td><td>16</td><td>5</td></tr>
|
|
<tr><td>13</td><td>20</td><td>17</td><td>6</td></tr>
|
|
<tr><td>12</td><td>19</td><td>18</td><td>7</td></tr>
|
|
<tr><td>11</td><td>10</td><td>9</td><td>8</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="minitable">
|
|
<h3>dark</h3>
|
|
<table class="demo tablesorter-dark">
|
|
<thead><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></thead>
|
|
<tfoot><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></tfoot>
|
|
<tbody>
|
|
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
|
|
<tr><td>14</td><td>15</td><td>16</td><td>5</td></tr>
|
|
<tr><td>13</td><td>20</td><td>17</td><td>6</td></tr>
|
|
<tr><td>12</td><td>19</td><td>18</td><td>7</td></tr>
|
|
<tr><td>11</td><td>10</td><td>9</td><td>8</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="minitable">
|
|
<h3>default</h3>
|
|
<table class="demo tablesorter-default">
|
|
<thead><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></thead>
|
|
<tfoot><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></tfoot>
|
|
<tbody>
|
|
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
|
|
<tr><td>14</td><td>15</td><td>16</td><td>5</td></tr>
|
|
<tr><td>13</td><td>20</td><td>17</td><td>6</td></tr>
|
|
<tr><td>12</td><td>19</td><td>18</td><td>7</td></tr>
|
|
<tr><td>11</td><td>10</td><td>9</td><td>8</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="minitable">
|
|
<h3>green</h3>
|
|
<table class="demo tablesorter-green">
|
|
<thead><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></thead>
|
|
<tfoot><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></tfoot>
|
|
<tbody>
|
|
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
|
|
<tr><td>14</td><td>15</td><td>16</td><td>5</td></tr>
|
|
<tr><td>13</td><td>20</td><td>17</td><td>6</td></tr>
|
|
<tr><td>12</td><td>19</td><td>18</td><td>7</td></tr>
|
|
<tr><td>11</td><td>10</td><td>9</td><td>8</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="minitable">
|
|
<h3>grey</h3>
|
|
<table class="tablesorter-grey">
|
|
<thead><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></thead>
|
|
<tfoot><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></tfoot>
|
|
<tbody>
|
|
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
|
|
<tr><td>14</td><td>15</td><td>16</td><td>5</td></tr>
|
|
<tr><td>13</td><td>20</td><td>17</td><td>6</td></tr>
|
|
<tr><td>12</td><td>19</td><td>18</td><td>7</td></tr>
|
|
<tr><td>11</td><td>10</td><td>9</td><td>8</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="minitable">
|
|
<h3>ice</h3>
|
|
<table class="demo tablesorter-ice">
|
|
<thead><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></thead>
|
|
<tfoot><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></tfoot>
|
|
<tbody>
|
|
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
|
|
<tr><td>14</td><td>15</td><td>16</td><td>5</td></tr>
|
|
<tr><td>13</td><td>20</td><td>17</td><td>6</td></tr>
|
|
<tr><td>12</td><td>19</td><td>18</td><td>7</td></tr>
|
|
<tr><td>11</td><td>10</td><td>9</td><td>8</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="minitable">
|
|
<h3>Bootstrap</h3>
|
|
<table class="tablesorter-bootstrap">
|
|
<thead><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></thead>
|
|
<tfoot><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></tfoot>
|
|
<tbody>
|
|
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
|
|
<tr><td>14</td><td>15</td><td>16</td><td>5</td></tr>
|
|
<tr><td>13</td><td>20</td><td>17</td><td>6</td></tr>
|
|
<tr><td>12</td><td>19</td><td>18</td><td>7</td></tr>
|
|
<tr><td>11</td><td>10</td><td>9</td><td>8</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="minitable">
|
|
<h3>jQuery UI</h3>
|
|
<table class="tablesorter-jui">
|
|
<thead><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></thead>
|
|
<tfoot><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></tfoot>
|
|
<tbody>
|
|
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
|
|
<tr><td>14</td><td>15</td><td>16</td><td>5</td></tr>
|
|
<tr><td>13</td><td>20</td><td>17</td><td>6</td></tr>
|
|
<tr><td>12</td><td>19</td><td>18</td><td>7</td></tr>
|
|
<tr><td>11</td><td>10</td><td>9</td><td>8</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="minitable">
|
|
<h3>dropbox</h3>
|
|
<table class="tablesorter-dropbox">
|
|
<thead><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></thead>
|
|
<tfoot><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></tfoot>
|
|
<tbody>
|
|
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
|
|
<tr><td>14</td><td>15</td><td>16</td><td>5</td></tr>
|
|
<tr><td>13</td><td>20</td><td>17</td><td>6</td></tr>
|
|
<tr><td>12</td><td>19</td><td>18</td><td>7</td></tr>
|
|
<tr><td>11</td><td>10</td><td>9</td><td>8</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|
|
|