WPDD

WordPress Develop & Design

Table short

Written by

Yaniv Sasson

in

, ,

by js library tablesort.js

fixed table header and body scroll

<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>דף קשר כיתה א3</title>
    <!-- Include the tablesort.js library -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tablesort/5.2.1/tablesort.min.js"></script>
    <!-- Include the tablesort date parsing plugin -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tablesort/5.2.1/sorts/tablesort.date.min.js"></script>
    <!-- Include the tablesort number parsing plugin -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tablesort/5.2.1/sorts/tablesort.number.min.js"></script>
    
	<style>


	body {
		padding-top: 15px;
		font-family: Arial;
		background-image: url(img/bg.jpg);
		background-repeat: no-repeat;
		background-position: center top;
		background-size: 100vw 100vh;
	}
	table {
		width: 100%;
		border-collapse: collapse;
		background-color: rgba(255,255,255,0.8);
	}
	th, td {
		padding: 10px;
		border: 1px solid #ccc;
		text-align: right;
	}
	th:first-child, td:first-child {
		width: 40px;
	}
	th {
		cursor: pointer;
	}	

	/* Scrollable tbody */

	tbody {
		display: block;
		height: 400px; /* Adjust height as needed */
		overflow-y: scroll;
	}
	thead, tbody tr {
		display: table;
		width: 100%;
		table-layout: fixed; /* Ensures column widths stay aligned */
	}
	/* Hide scrollbar in Chrome/Safari/Edge */

	::-webkit-scrollbar-track {
		background: #f1f1f1;
	}
	::-webkit-scrollbar-thumb {
		background: #888;
	}
	::-webkit-scrollbar-thumb:hover {
		background: #555;
	}
	
	.main {
		max-width: 900px;
		margin: 0 auto;
	}
	.header {
		display: flex;
		justify-content: center;
		margin-bottom: 20px;
	}
	.header .text .inner {
		padding-bottom: 0px;
	}
	.header .text .inner:after {
		content: '';
		position: relative;
		z-index: 1;
		display: block;
		width: 100%;
		height: 68px;
		margin-top: -10px;
		background-image: url(img/ballons.png);
		background-repeat: no-repeat;
		background-position: center bottom;
		background-size: 100% 100%;
	}
	.header .text .inner .box {
		background-color: #9386cc;
		clip-path: polygon(100% 0%, 85% 50%, 100% 100%, 0 100%, 15% 50%, 0 0);
		color: #fff;
		padding: 13px 80px 17px;
	}
	.text {
		display: flex;
		justify-content: center;
		width: 100%;
		text-align: center;
	}
	.text h1 {
		margin-top: 0;
		margin-bottom: 0;
		font-size: 24px;
		line-height: 1.1;
	}
	.text p {
		margin-top: 0;
		margin-bottom: 0;
	}
	table, th, td {
		border: 0px;
		margin: 0;
		border-spacing: 0;
	}
	th, td {
		padding: 0;
	}
	table {
		width: 890px;
		margin: 0 auto;
		background-color: #b8cce4;
		box-shadow: 0px 0px 44px rgba(0,0,0,0.5);
		border: 1px solid #cccc;
	}
	th {
		padding: 16px 8px;
	}
	td {
		padding: 12px 8px;
	}
	th {
		background-color: #b8cce4;
	}
	tr:nth-child(2n+1) {
		background-color: #eee;
	}
	tr:nth-child(2n) {
	  background-color: #fff  ;
	}
	@media(min-width: 900px){
		::-webkit-scrollbar {
			width: 12px;
		}
		thead{
			width: calc(100% - 17px);
		}
	}
	@media(max-width: 900px){
		body {
			font-size: 14px;
		}
		.text h1 {
			margin-bottom: 5px;
			font-size: 22px;
		}
		.table {
		  max-width: 100%;
		  overflow: auto;
		}
	}
	</style>
</head>
<body dir="rtl">
	<div class="main">
	<div class="header">
		<div class="text">
			<div class="inner">
				<div class="box">
					<h1>דף קשר<br />
					כיתה א'3</h1>
					<p><strong>מחנכת הכיתה:</strong> הדר לוי<br > נייד: <a style="color:#fff" href="tel:0525853082">0525853082</a></p>	
				</div>
			</div>
		</div>
	</div>
    <div class="table">
    <table id="myTable" border="0" border-spacing="0" class="display">
        <thead>
			<tr>
			<th class="sortHead" comparemethod="number" >מספר</th>
			<th class="sortHead" comparemethod="text" >שם משפחה</th>
			<th class="sortHead" comparemethod="text" >שם התלמיד</th>
			<th class="sortHead" comparemethod="text" >שם ההורים</th>
			<th class="sortHead" comparemethod="number" >נייד אמא</th>
			<th class="sortHead" comparemethod="number" >נייד אבא</th>
			<th class="sortHead" comparemethod="date" >תאריך לידה</th>
			<th class="sortHead" comparemethod="text" >ישוב</th>
        </tr>
		</thead>
		<tbody>
			  <tr>
				<td>1</td>
				<td>אוחנה</td>
				<td>אריאל</td>
				<td>שימרית ואורניר</td>
				<td><a href="tel:+972507691656">0507691656</a></td>
				<td><a href="tel:+972529463711">0529463711</a></td>
				<td data-sort-method="date">5/6/2018</td>
				<td>חוסן</td>
			  </tr>
				
			  <tr>
				<td>2</td>
				<td>אוחנה</td>
				<td>שילת</td>
				<td>בת-אל ומוטי</td>
				<td><a href="tel:+972526815495">0526815495</a></td>
				<td><a href="tel:+972505078307">0505078307</a></td>
				<td data-sort-method="date">10/12/2018</td>
				<td>צוריאל</td>
			  </tr>
				
			  <tr>
				<td>3</td>
				<td>אלפסי</td>
				<td>אלמה</td>
				<td>שלהבת ויוסי</td>
				<td><a href="tel:+972526091321">0526091321</a></td>
				<td><a href="tel:+972548866444">0548866444</a></td>
				<td data-sort-method="date">28/12/2017</td>
				<td>חוסן</td>
			  </tr>
				
			  <tr>
				<td>4</td>
				<td>אלקובי</td>
				<td>ליאל</td>
				<td>סיון ויהודה</td>
				<td><a href="tel:+972524301553">0524301553</a></td>
				<td><a href="tel:+972524353381">0524353381</a></td>
				<td data-sort-method="date">18/12/2018</td>
				<td>חוסן</td>
			  </tr>
				
			  <tr>
				<td>5</td>
				<td>ביטון</td>
				<td>ליה</td>
				<td>אנאבל וחי</td>
				<td><a href="tel:+972507474464">0507474464</a></td>
				<td><a href="tel:+972526643449">0526643449</a></td>
				<td data-sort-method="date">9/7/2018</td>
				<td>פקיעין החדשה</td>
			  </tr>
				
			  <tr>
				<td>6</td>
				<td>בנימינוב</td>
				<td>אביב</td>
				<td>סבינה ומיכאל</td>
				<td><a href="tel:+972545349284">0545349284</a></td>
				<td><a href="tel:+972545349462">0545349462</a></td>
				<td data-sort-method="date">21/2/2018</td>
				<td>מצפה הילה</td>
			  </tr>
				
			  <tr>
				<td>7</td>
				<td>בסון</td>
				<td>אלעד</td>
				<td>זלטה וצחי</td>
				<td><a href="tel:+972509903799">0509903799</a></td>
				<td><a href="tel:+972525135651">0525135651</a></td>
				<td data-sort-method="date">10/1/2018</td>
				<td>חוסן</td>
			  </tr>
				
			  <tr>
				<td>8</td>
				<td>בראל</td>
				<td>מתן</td>
				<td>טלי ורועי</td>
				<td><a href="tel:+972528725905">0528725905</a></td>
				<td><a href="tel:+972523247174">0523247174</a></td>
				<td data-sort-method="date">20/8/2018</td>
				<td>מעונה</td>
			  </tr>
				
			  <tr>
				<td>9</td>
				<td>ברדוגו</td>
				<td>עומר</td>
				<td>דניאל ומאור</td>
				<td><a href="tel:+972503333611">0503333611</a></td>
				<td><a href="tel:+972502485165">0502485165</a></td>
				<td data-sort-method="date">24/4/2018</td>
				<td>מעונה</td>
			  </tr>
				
			  <tr>
				<td>10</td>
				<td>גיידרוב</td>
				<td>אסף</td>
				<td>ויטה ופרדי</td>
				<td><a href="tel:+972545607019">0545607019</a></td>
				<td><a href="tel:+972545607018">0545607018</a></td>
				<td data-sort-method="date">31/1/2018</td>
				<td>פקיעין החדשה</td>
			  </tr>
				
			  <tr>
				<td>11</td>
				<td>דהן</td>
				<td>ינאי</td>
				<td>פנינה וחיים</td>
				<td><a href="tel:+972524486160">0524486160</a></td>
				<td><a href="tel:+972548366326">0548366326</a></td>
				<td data-sort-method="date">4/10/2018</td>
				<td>פקיעין החדשה</td>
			  </tr>
				
			  <tr>
				<td>12</td>
				<td>דרעי</td>
				<td>שילה</td>
				<td>שלי ומוטי</td>
				<td><a href="tel:+972509806015">0509806015</a></td>
				<td><a href="tel:+972537628000">0537628000</a></td>
				<td data-sort-method="date">29/8/2018</td>
				<td>פקיעין החדשה</td>
			  </tr>
				
			  <tr>
				<td>13</td>
				<td>היימן</td>
				<td>רפאל</td>
				<td>נטלי וטל</td>
				<td><a href="tel:+972503914883">0503914883</a></td>
				<td><a href="tel:+972506340868">0506340868</a></td>
				<td data-sort-method="date">13/1/2018</td>
				<td>חוסן</td>
			  </tr>
				
			  <tr>
				<td>14</td>
				<td>זנאתי-הכהן</td>
				<td>נתנאל</td>
				<td>אתי וברוך</td>
				<td><a href="tel:+972509978698">0509978698</a></td>
				<td><a href="tel:+972502040103">0502040103</a></td>
				<td data-sort-method="date">25/5/2018</td>
				<td>פקיעין החדשה</td>
			  </tr>
				
			  <tr>
				<td>15</td>
				<td>זנטי</td>
				<td>דני</td>
				<td>לירון ואסף</td>
				<td><a href="tel:+972503973777">0503973777</a></td>
				<td><a href="tel:+972525554631">0525554631</a></td>
				<td data-sort-method="date">8/2/2018</td>
				<td>צוריאל</td>
			  </tr>
				
			  <tr>
				<td>16</td>
				<td>טורג'מן</td>
				<td>רומי</td>
				<td>דורין ואבישי</td>
				<td><a href="tel:+972506583264">0506583264</a></td>
				<td><a href="tel:+972506955660">0506955660</a></td>
				<td data-sort-method="date">30/7/2018</td>
				<td>צוריאל</td>
			  </tr>
				
			  <tr>
				<td>17</td>
				<td>ישראל-חתן</td>
				<td>עוז</td>
				<td>מור וניצן</td>
				<td><a href="tel:+972543134371">0543134371</a></td>
				<td><a href="tel:+972525538123">0525538123</a></td>
				<td data-sort-method="date">25/1/2018</td>
				<td>מעונה</td>
			  </tr>
				
			  <tr>
				<td>18</td>
				<td>כהן</td>
				<td>אריאל</td>
				<td>אוריאן ואלירן</td>
				<td><a href="tel:+972549026770">0549026770</a></td>
				<td><a href="tel:+972502529557">0502529557</a></td>
				<td data-sort-method="date">21/2/2018</td>
				<td>מעונה</td>
			  </tr>
				
			  <tr>
				<td>19</td>
				<td>לגריסי</td>
				<td>עומר</td>
				<td>עידן ויוסי</td>
				<td><a href="tel:+972528972941">0528972941</a></td>
				<td><a href="tel:+972525595269">0525595269</a></td>
				<td data-sort-method="date">22/7/2018</td>
				<td>פקיעין החדשה</td>
			  </tr>
				
			  <tr>
				<td>20</td>
				<td>לוי</td>
				<td>איימי</td>
				<td>שריי ויגאל</td>
				<td><a href="tel:+972527395443">0527395443</a></td>
				<td><a href="tel:+972507363337">0507363337</a></td>
				<td data-sort-method="date">25/4/2018</td>
				<td>חוסן</td>
			  </tr>
				
			  <tr>
				<td>21</td>
				<td>לסרי</td>
				<td>יהלי</td>
				<td>ירדן וקובי</td>
				<td><a href="tel:+972527473667">0527473667</a></td>
				<td><a href="tel:+972526676015">0526676015</a></td>
				<td data-sort-method="date">19/12/2018</td>
				<td>צוריאל</td>
			  </tr>
				
			  <tr>
				<td>22</td>
				<td>מזור</td>
				<td>אייל</td>
				<td>לירון ונדב</td>
				<td><a href="tel:+972526838842">0526838842</a></td>
				<td><a href="tel:+972508671144">0508671144</a></td>
				<td data-sort-method="date">12/3/2018</td>
				<td>מצפה הילה</td>
			  </tr>
				
			  <tr>
				<td>23</td>
				<td>עמור</td>
				<td>אמילי</td>
				<td>הדר ואחיעד</td>
				<td><a href="tel:+972525706129">0525706129</a></td>
				<td><a href="tel:+972533327072">0533327072</a></td>
				<td data-sort-method="date">28/9/2018</td>
				<td>צוריאל</td>
			  </tr>
				
			  <tr>
				<td>24</td>
				<td>קורוטון</td>
				<td>קים</td>
				<td>אולגה ואיליה</td>
				<td><a href="tel:+972547628542">0547628542</a></td>
				<td><a href="tel:+972547628442">0547628442</a></td>
				<td data-sort-method="date">8/5/2018</td>
				<td>מעונה</td>
			  </tr>
				
			  <tr>
				<td>25</td>
				<td>קלשטיין</td>
				<td>אדם</td>
				<td>נעה וליאור</td>
				<td><a href="tel:+972522613089">0522613089</a></td>
				<td><a href="tel:+972525505814">0525505814</a></td>
				<td data-sort-method="date">12/12/2018</td>
				<td>מצפה הילה</td>
			  </tr>
				
			  <tr>
				<td>26</td>
				<td>שרביט</td>
				<td>נעמה</td>
				<td>רינת ועמי</td>
				<td><a href="tel:+972549343407">0549343407</a></td>
				<td><a href="tel:+972528730052">0528730052</a></td>
				<td data-sort-method="date">24/5/2018</td>
				<td>פקיעין החדשה</td>
			  </tr>
				
			  <tr>
				<td>27</td>
				<td>ששון</td>
				<td>רומי</td>
				<td>דקר-יפית ויניב</td>
				<td><a href="tel:+972546080906">0546080906</a></td>
				<td><a href="tel:+972533029531">0533029531</a></td>
				<td data-sort-method="date">16/1/2018</td>
				<td>פקיעין החדשה</td>
			  </tr>
			</tbody>
		</table>
	</div>
</div>

<!-- Initialize the table sorting functionality -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var table = document.getElementById('myTable');
        new Tablesort(table);

        // Custom parser for date in the format DD.MM.YYYY
        Tablesort.extend('date', function(item) {
            // Check if the item matches DD.MM.YYYY
            return /^\d{1,2}\.\d{1,2}\.\d{4}$/.test(item);
        }, function(a, b) {
            // Convert DD.MM.YYYY to YYYYMMDD format for proper comparison
            function parseDate(dateString) {
                var parts = dateString.split('.');
                return new Date(parts[2], parts[1] - 1, parts[0]); // Create a new Date object
            }
            
            a = parseDate(a);
            b = parseDate(b);
            return a - b; // Compare the two dates
        });
    });
</script>
</body>
</html>

More posts