Πολλοι admin φτιαχνουν σελιδες με διαφορα εργαλεια που χρειαζεται να χρησιμοποιουν καθημερινα στην εταιρεια για την οποια ειναι υπευθυνοι. Μια απο τις πιο χρησιμες εντολες ειναι η nslookup. Για οσους δεν γνωριζουν χοντρικα θα πω οτι dns ειναι η υπηρεσια που τρεχει σε ενα server και μετατρεπει τις ip σε διευθυνσεις πιο κατανοητες για τους ανθρωπους. Δηλαδη το 50.61.249.140 σε xdev.gr. Η εντολη λοιπον του λειτουργικου με την οποια μπορειτε να δειτε την ip διευθυνση ειναι η nslookup και την τρεχουμε απο command line. Ομως με τον παρακατω κωδικα μπορουμε να κανουμε εναν webserver να μας επιστρεφει την IP απο ενα url που του δωσαμε. Για να γινει αυτο χρησιμοποιηθηκε η IpHostEntry class.
Σε ενα απλο aspx αρχειο (φορμα) εβαλα ενα textbox για την εισαγωγη της διευθυνσης, ενα κουμπακι και ενα label για το αποτελεσμα
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="IPHostEntry.aspx.cs" Inherits="IPHostEntry.IPHostEntry" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>IpHostEntry Class Example Code</title>
</head>
<body>
<form id="form1" runat="server" style="font-family: tahoma;">
<table>
<tr>
<td colspan="2" style="text-align: center">Type the Url</td>
</tr>
<tr>
<td>http://<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></td>
<td><asp:Button ID="Button1" runat="server" Text="NsLookup" onclick="Button1_Click" /></td>
</tr>
<tr>
<td colspan="2" style="text-align: center; font-weight: 600;"><asp:Label ID="Label1" runat="server" Text=""></asp:Label></td>
</tr>
</table>
</form>
</body>
</html>
Και το αρχειο με το κωδικα σε c#
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace IPHostEntry
{
public partial class IPHostEntry : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{}
protected void Button1_Click(object sender, EventArgs e)
{
string url = TextBox1.Text;
System.Net.IPHostEntry hostInfo = Dns.GetHostEntry(url);
foreach (var ip in hostInfo.AddressList)
{
Label1.Text = ip.ToString();
}
}
}
}
Aν θελετε κατεβαστε το παρακατω αρχειο που περιεχει ολο τον κωδικα για να τον χρησιμοποιησετε στη δικια σας σελιδα με τα network tools.
IPHostEntry.zip (15.79 kb)
Στην εταιρεια αυτες τις μερες φτιαχνουμε ενα site για εσωτερικη χρηση και επειδη προκειται να χρησιμοποιεται απο τουλαχιστον 8000 χρηστες καθημερινα αποφασισαμε να οτι στα στοιχεια(log) που θα κραταμε καλο ειναι να εχουμε και καποιες εξτρα πληροφοριες σχετικα με τους browser. Κυριως για στατιστικους λογους αλλα και για βελτιωση οπου πιθανον χρειαστει αργοτερα. Επειδη ηθελα αυτα τα στοιχεια να γραφονται σε βαση δεδομενων η χρηση javascript αποκλειστηκε. Χρησιμοποιηθηκε η C# και ποιο συγκεκριμενα η class HttpBrowserCapabilities.
Στον παρακατω κωδικα βλεπουμε τι στοιχεια μπορει να μας δωσει.
Το Aspx αρχειο:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="HttpBrowserCapabilities.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>HttpBrowserCapabilities Class</title>
</head>
<body>
<form id="form1" runat="server">
<div style="font-family: verdana; color:darkblue;">
<h2 style="text-decoration: underline">HttpBrowserCapabilities Class</h2>
<h4>η κλαση HttpBrowserCapabilities μας δινει τη δυνατοτητα <br />να συλλεξουμε πληροφοριες
σχετικες με τον φυλλομετρητη<br /> που χρησιμοποιει ο επισκεπτης μας.</h4>
<asp:Label ID="Label1" runat="server"></asp:Label>
<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
</div>
</form>
</body>
</html>
Και ο c# κωδικας:
using System;
using System.Web;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click(object sender, EventArgs e)
{
HttpBrowserCapabilities browser = Request.Browser;
string s = "Browser Capabilities:" + "<br/>"
+ "Type = " + browser.Type + "<br/>"
+ "Name = " + browser.Browser + "<br/>"
+ "Version = " + browser.Version + "<br/>"
+ "Major Version = " + browser.MajorVersion + "<br/>"
+ "Minor Version = " + browser.MinorVersion + "<br/>"
+ "Platform = " + browser.Platform + "<br/>"
+ "Is Beta = " + browser.Beta + "<br/>"
+ "Is Crawler = " + browser.Crawler + "<br/>"
+ "Is AOL = " + browser.AOL + "<br/>"
+ "Is Win16 = " + browser.Win16 + "<br/>"
+ "Is Win32 = " + browser.Win32 + "<br/>"
+ "Supports Frames = " + browser.Frames + "<br/>"
+ "Supports Tables = " + browser.Tables + "<br/>"
+ "Supports Cookies = " + browser.Cookies + "<br/>"
+ "Supports VBScript = " + browser.VBScript + "<br/>"
+ "Supports JavaScript = " +
browser.EcmaScriptVersion.ToString() + "<br/>"
+ "Supports Java Applets = " + browser.JavaApplets + "<br/>"
+ "Supports ActiveX Controls = " + browser.ActiveXControls
+ "<br/>"
+ "Supports JavaScript Version = " +
browser["JavaScriptVersion"] + "<br/>";
Label1.Text = s;
}
}
Μπορειτε να τον δοκιμασετε εδω ή αν θελετε κατεβαστε το παρακατω αρχειο.
HttpBrowserCapabilities.zip (1.63 kb)
Αν το περιεχομενο του website που φτιαχνετε ειναι ακαταλληλο για ατομα κατω των 18 ετων τοτε καλο θα ηταν κατα την εισοδο του χρηστη να συμπληρωνει την ηλικια του σε ενα πεδιο. Αυτο βεβαια δε σημαινει οτι υπαρχει προστασια αφου μπορει να βαλει οτι ημερομηνια θελει ομως ετσι ειναι σαν να αποδεχεται αυτο που θα δει παρακατω.
Ο κωδικας ειναι αρκετα απλος και για την ακριβεια χρησιμοποιησα κομματια απο προηγουμενα ποστ. Εχουμε ενα πινακακι html με δυο input. Eνα το πεδιο για την ημερομηνια και ενα κουμπακι. Λιγο css styling και το jquerytools dateinput plugin για να μας κανει ευκολη τη ζωη στην εισαγωγη της ημερομηνιας. Λιγο προσοχη μονο στο οτι εγω προσθεσα και αυτα format: 'mm / dd / yyyy', selectors: 'true', yearRange: [-100,1]. Ας δουμε τον κωδικα:
<html>
<head>
<title>http://www.xDev.gr - Mini age validation with user entry.</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
<link rel="stylesheet" type="text/css" href="calendar.css"/>
<style>
table{font-family:"Verdana",Times,serif;}
.maindiv{
-moz-border-radius: 4px;
border-radius: 4px;
border-color:grey;
background-image: -webkit-linear-gradient(bottom, #FFFFFF 0%, #FF6600 100%);
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #FFFFFF), color-stop(1, #FF6600));
background-image: -moz-linear-gradient(bottom, #FFFFFF 0%, #FF6600 100%);
background-image: -ms-linear-gradient(bottom, #FFFFFF 0%, #FF6600 100%);
width:284px;
height:80px;}
th{color:white;}
</style>
</head>
<body>
<div id="main" class="maindiv">
<table>
<tr>
<th>Enter your date of birth.</th>
<td></td>
</tr>
<tr>
<td><input id="calendar1" type="date" /></td>
<td><input type="submit" id="submit" Value="Submit" onClick="window.location.reload()"/></td>
</tr>
</table>
</div>
<script type="text/javascript">
var xronia = $("input#calendar1").dateinput({
format: 'mm / dd / yyyy', selectors: 'true', yearRange: [-100,1]});
$("#submit").on("click", function(){
var x = xronia.val();
var today = new Date();
var birthDate = new Date(x);
var age = today.getFullYear() - birthDate.getFullYear();
var m = today.getMonth() - birthDate.getMonth();
if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
age = age - 1; }
if (age >= "18"){alert("You are "+age+". Access granted");}
else alert("You are only "+age+". Access denied");
});
</script>
</body>
</html>
Αυτο που κανω λοιπον ειναι μεσω jquery να επιλεγω το κουμπι και να του βαζω οταν γινει σε αυτο κλικ να τρεχει μια function η οποια παιρνει την τιμη του πεδιου και την συγκρινει με την σημερινη ημερομηνια. Αν ειναι πανω απο 18 βγαζει Access granted διαφορετικα δεν επιτρεπεται η προσβαση.
Μπορειτε να το δειτε online εδω η αν θελετε μπορειτε να κατεβασετε τον κωδικα και τα images/css κανοντας κλικ στο παρακατω link.
Javascript_Age_validation.zip (3.33 kb)
Recently I came across a strange issue with the encoding of simple xml files. Our head developer have set a hook in the svn for not allowing us to commit code files with utf-8 bom encoding. Never had problems until today that suddenly I started getting error messages. But i never added bom to my files! How this may happened? Usually, if you have to do a quick change and you used notepad as an editor. I know, I know... who is using this piece of s....oftware in 2012? Me, accidentally though and once! So after spending some time in Google the easiest way i found to fix the xml file was with the option that Notepad++ offers. Check the screenshot below. It is in Encoding -> Convert to UTF-8 without BOM or Encode in UTF-8 without BOM. If you want to learn more by the way about BOM check this article in wikipedia.
Αν επισκεφθειτε μια ιστοσελιδα αεροπορικης εταιρειας ο πιθανοτερος λογος ειναι για να δειτε τιμες ή διαθεσιμοτητα των εισητηριων. Οποτε το πρωτο που κανει ο επισκεπτης ειναι να εισαγει σε καποια πεδια τις ημερομηνιες που τον ενδιαφερουν. Σκεφτηκα λοιπον να ανεβασω ενα μικρο κομματι κωδικα που κανει αυτο ακριβως, εισαγει δηλαδη σε δυο πεδια τις ημερομηνιες που καποιος επιλεγει χωρις να χρειαστει να τις πληκτρολογησει.Αυτο γινεται μεσω ενος ημερολογιου. Ετσι το μονο που χρειαζεται ειναι να πλοηγηθει στην ημερα που επιθυμει και να την επιλεξει.
Τελος προσθεσα και ενα μικρο κομματι κωδικα που οταν καλειται(μεσω κουμπιου) επιστρεφει τον αριθμο των ημερων μεταξυ των δυο επιλεγμενων ημερομηνιων. Ας δουμε τον κωδικα και θα εξηγησω στο τελος τα κυριοτερα.
<html>
<head>
<title>xDev.gr - Choose dates and get the number of days off.</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://jquerytools.org/media/css/dateinput/skin1.css"/>
<style>
table{font-family:"Verdana",Times,serif;}
.maindiv{
-moz-border-radius: 8px;
border-radius: 8px;
border-color:grey;
background-image: -webkit-linear-gradient(bottom, #FFFFFF 0%, #00A3EF 100%);
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #FFFFFF), color-stop(1, #00A3EF));
background-image: -moz-linear-gradient(bottom, #FFFFFF 0%, #00A3EF 100%);
background-image: -ms-linear-gradient(bottom, #FFFFFF 0%, #00A3EF 100%);
width:510px;
height:80px;}
th{color:white;}
</style>
</head>
<body>
<div id="main" class="maindiv">
<table>
<tr>
<th>Date to fly out</th>
<th>Date to come back</th>
</tr>
<tr>
<td><input id="calendar1" type="date" /></td>
<td><input id="calendar2" type="date" /></td>
<td><input type="submit" Value="Number of days" /></td>
</tr>
</table>
</div>
<script type="text/javascript">
var one_day=1000*60*60*24;
var Departure = $("input#calendar1").dateinput();
var Arrival = $("input#calendar2").dateinput();
$(":submit").bind("click",
function getdaystrip(){
var x = Departure.val().split("/");
var y = Arrival.val().split("/");
var date1=new Date(x);
var date2=new Date(y);
var TotalDays = Math.ceil((date2-date1)/(one_day));
if (TotalDays <=0)
alert("Choose different departure date. You can't return if you never really left" );
else
alert("You will be away for " + TotalDays + " days" );
});
</script>
</body>
</html>
Πανω πανω λοιπον καλουμε σε script tags την jquery και το plugin του ημερολογιου. Εγω επελεξα το jquery Tools αλλα υπαρχουν αρκετα αλλα που κανουν την ιδια δουλεια. Περισσοτερες πληροφοριες για το συγκεκριμενο plugin θα βρειτε εδω. Αφου φτιαξουμε και λιγο το styling μεσω css , περναμε στην html. Δυο απλα input πεδια με type="date" και ενα κουμπακι. Και τωρα στο ζουμι, μεσω jquery επιλεγουμε τα input και τα περναμε σε μεταβλητες. Επισης δημιουργουμε μια μεταβλητη που εχει την τιμη 1000*60*60*24, δηλαδη ο χρονος μιας ημερας σε milliseconds. Θα το χρειαστουμε παρακατω.
Επειτα δημιουργουμε μια function την οποια βαζουμε στο κουμπακι οταν σε αυτο γινει κλικ(μεσω του bind-click). Στην function παιρνουμε τις ημερομηνιες που εβαλε ο χρηστης (μεσω της .val()) και τις κανουμε split. Αυτο που μενει το περναμε σε ενα νεο date object. Μπορειτε να διαβασετε για αυτο το object αναλυτικοτερα εδω. Τελος κανουμε τον υπολογισμο, στην προκειμενη περιπτωση αφαιρεση την αναχωρηση απο την επιστροφη. Επειδη ομως το object μας δινει τον χρονο σε ms , διαιρουμε το αποτελεσμα της αφαιρεσης με την μεταβλητη one_day που δημιουργησαμε νωριτερα. Και ολα αυτα σε μια Math.ceil η οποια στρογγυλοποιει προς τα επανω. Τελος μεσω ενος if else statement δινουμε το αναλογο μηνυμα.
Θα βρειτε ολο τον κωδικα στο παρακατω αρχειο ή αν θελετε μπορειτε να το τρεξετε εδω.
(xDevGR-calendars).html (1.93 kb)
Ειναι αρκετοι οι browser που κυκλοφορουν πλεον αφου η εποχη του μονοπωλειου του Internet Explorer εχει περασει ανεπιστρεπτη. Ομως η Google ως γνωστον πιεζει τους developers να χρησιμοποιουν οσο περισσοτερο γινεται την javascript. Κατα τη γνωμη μου λοιπον ο browser που θα επικρατησει τα επομενα χρονια ειναι αυτος που θα ειναι πιο γρηγορος σε υπολογισμους της javascript.
Ενας ευκολος και γρηγορος τροπος για να μετρησουμε την επιδοση του καθενος ειναι μεσω ενος μαθηματικου υπολογισμου αφου καταγραψουμε την ημερομηνια πριν και μετα τον υπολογισμο. Επειτα εκτελουμε μια απλη αφαιρεση και το αποτελεσμα που μας μενει σε ms ειναι ο χρονος που χρειαστηκε ο φυλλομετρητης. Στο παρακατω κωδικα δημιουργω δυο arrays, και γεμιζω το ενα απο τα δυο μεσω ενος loop με αριθμους. Για την ακριβεια 500.000 ετσι ωστε η διαφορα να ειναι εμφανη. Υστερα χρησιμοποιω δυο γνωστες μεθοδους για να προσθεσω τα περιεχομενα του δευτερου array στο πρωτο. Η πρωτη μεθοδος ειναι με την push και η δευτερη με την concat. Τελος μεσω ενος jquery chart plugin περναω τα αποτελεσματα σε ενα div για να δουμε και γραφικα την διαφορα των επιδοσεων. Ο κωδικας εχεις ως εξης:
<html lang="en">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://jqbargraph.googlecode.com/files/jqBarGraph.1.1.js" type="text/javascript"></script>
</head>
<body>
<div id="main"></div>
<script type="text/javascript">
var d1, d2, d3, d4, arr1 = [1, 2], arr2 = [], i = 0, len;
for (; i < 500000; i++) {arr2[i] = i;}
i = 0;
len = arr2.length;
d1 = new Date().getTime();
for (; i < len; i++) {arr1.push(arr2[i]);}
d2 = new Date().getTime();
arr1 = [1, 2];
d3 = new Date().getTime();
arr1 = arr1.concat(arr2);
d4 = new Date().getTime();
arrayOfData = new Array([d2 - d1, 'looping and pushing', '#cccccc'],[d4 - d3, "array's concat", '#333333']);
$('#main').jqBarGraph({ data: arrayOfData });
</script>
</body>
</html>
Και αυτα ειναι τα αποτελεσματα που παιρνω σε chrome 18 , firefox 11 και Internet Explorer 9. (Οσο χαμηλοτερα τοσο καλυτερα)
Οπως βλεπετε κι εσεις o chrome και ο IE ειναι πιο γρηγοροι στον πρωτο τροπο υπολογισμου σε αντιθεση με τον Firefox που ειναι πιο δυνατος στην push. Μπορειτε να σωσετε το παρακατω html αρχειακι και να το τρεχετε οταν βγαινουν νεες εκδοσεις για συγκριση με παλαιοτερες. Διαφορετικα μπορειτε να το τρεξετε live απο εδω.
perf.html (896.00 bytes)
Το να χρειαστουμε σε καποιο σημειο του κωδικα μας εναν τυχαιο αριθμο ειναι κατι πολυ συχνο. Μια γεννητρια που δεχεται δυο μεταβλητες τις οποιες οριζουμε εμεις και μας δινει εναν στρογγυλοποιημενο αριθμο μεταξυ αυτων που εισαγουμε ειναι νομιζω κατι αρκετα χρησιμο. Κρατηστε τον παρακατω κωδικα στο αρχειο σας. Αν παιξετε λοττο με αυτους τους αριθμους και κερδισετε τοτε θελω μεριδιο!
Οπως βλεπετε το πιο σημαντικο κομματι του κωδικα ειναι αυτο:
function getRandomNumberInRange(min, max) {
return Math.floor( Math.random() * (max - min + 1) + min);
}
Εδω δημιουργησαμε μια function που παιρνει δυο μεταβλητες. Η Math.random() μας δινει εναν αριθμο μεταξυ 0 και 1. Αυτον μετα τον πολλαπλασιαζουμε και τον στρογγυλοποιουμε με την Math.floor()
Ολος ο κωδικας:
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<title>Random number generator by xDev.gr </title>
</head>
<body>
<div id="main">
<p>Enter two numbers and I'll give you a random one between those two. </p>
Min:<input id="Text1" type="text" /><br />
Max:<input id="Text2" type="text" /><br />
<input id="Button1" type="button" value="Random Number" onclick="result()"/>
</div>
<script type="text/javascript">
function getRandomNumberInRange(min, max) {
return Math.floor( Math.random() * (max - min + 1) + min);
}
function result() {
value1 = $("#Text1").val();
value2 = $("#Text2").val();
alert(getRandomNumberInRange(value1, value2));
}
</script>
</body>
</html>
Μπορειτε να το δοκιμασετε εδω. Βαλτε πχ 0 -100.
Το να περιεχει ο κωδικας μιας σελιδας ενα loop ειναι κατι συνηθισμενο και σιγουρα θα εχετε δει αρκετα παραδειγματα για το πως να χρησιμοποιουμε ενα loop. Ας δουμε ομως πως μπορουμε να το βελτιωσουμε ωστε να κερδισουμε εστω και μερικα κλασματα του δευτερολεπτου ευκολα. Ενα τυπικο loop που διαβαζει τα ονοματα σε ενα array ειναι το παρακατω:
var names = ["Chris", "Maria", "Alex"];
for (var i = 0; i < names.length; i++) {
alert("Say hello to " + names[i]);
}
Οπως βλεπουμε ξεκιναει το loop με την λεξη for και μετα εχουμε κλασικα τα τρια statement. Aν ομως περασουμε το name.length σε μια μεταβλητη και χρησιμοποιησουμε αυτη τη μεταβλητη στο δευτερο statement τοτε ο βρογχος μας θα εκτελεστει πιο γρηγορα. Παραδειγμα:
var names = ["Chris", "Maria", "Alex"];
for (var i = 0, len = names.length; i < len; i++) {
alert("Say hello to " + names[i]);
}
Δειτε ομως και το παρακατω παραδειγμα που ειναι οσο πιο optimized γινεται! Μαλιστα θα σας θυμιζει loop με την χρηση του while!
var names = ["Chris", "Maria", "Alex"];
for ( ; names[i] ; ) {
alert("Say hello to " + names[i]);
i++;
}
Προσωπικα με βοηθαει αρκετα να μαθαινω και να χρησιμοποιω τετοιες τεχνικες οχι μονο για την βελτιωση του κωδικα αλλα και για τον διαφορετικο τροπο σκεψης που μερικες φορες χρειαζεται για να προσεγγισεις καποιο προβλημα.
Ενα tip που σιγουρα γνωριζουν και χρησιμοποιουν οσοι ειναι παθιασμενοι με το optimization σε κωδικα javascript ειναι ο ελεγχος και εκτελεση μιας function μεσω της χρησης του AND operator.
Δειτε παρακατω και θα εξηγησω:
functionName && functionName();
Οπως γνωριζουμε για να εκτελεσουμε μια javascript function θα πρεπει να βαλουμε τις παρενθεσεις στο τελος function(). Αρα στο παραπανω παραδειγμα , στο πρωτο μερος του κωδικα η function δεν εκτελειται αλλα επιστρεφει. Αν υφισταται αυτη η function τοτε γινεται το πρωτο σκελος true και συνεχιζει στο δευτερο το οποιο εκτελειται αφου εχουμε τις παρενθεσεις στο τελος. Με αυτον το τροπο αποφευγουμενα παρουμε μηνυμα λαθους αν προσπαθουσαμε να εκτελεσουμε function που δεν υπαρχει. Μερικες φορες μου ειναι λιγο δυσκολο να εξηγω αυτο που σκεφτομαι στα ελληνικα οποτε συγχωρεστε με αν δεν γινομαι απολυτα κατανοητος.
Αν σε μια απλη στατικη σελιδα που περιεχει δεδομενα σε μορφη πινακα θελησουμε να προσθεσουμε το χαρακτηριστικο του sorting αυτο γινεται πολυ ευκολα μεσω μιας απλης javascript library που μπορειτε να βρειτε εδω. Σκεφθειτε μια παλια σελιδα ενος πελατη , που την ανανεωνει μια φορα στο τοσο και μαλιστα μονο πχ στατιστικα δεδομενα ή αποτελεσματα της επιχειρησης. Χρηματα δεν υπαρχουν στην αγορα οποτε αλλαγη πλατφορμας και αναβαθμιση μαλλον δεν θα υπαρξει. Οι server-side τεχνικες φιλτραρισματος που ειχατε στο νου σας δεν θα υλοποιηθουν. Αν προτιματε αντι για javascript library να χρησιμοποιησετε jQuery δεν υπαρχει καποιο προβλημα. Η επιλογη ειναι δικη σας. Εμενα μου αρεσει η Sorttable απο το site kryogenix. Ειναι πολυ απλη στη χρηση, αφου το μονο που χρειαζεται να κανουμε ειναι να προσθεσουμε την βιβλιοθηκη στην αρχη της σελιδας , υστερα φτιαχνουμε μια css κλαση και την προσθετουμε στο table tag. Αυτο ηταν. Job done!
<html>
<head><title>Client side table sorting. xDev.gr</title></head>
<script src="http://www.kryogenix.org/code/browser/sorttable/sorttable.js"></script>
<style>
table.sortable thead {
background-color:#eee;
color:#666666;
font-weight: bold;
cursor: default;
}
</style>
<body>
<table cellspacing="1" class="sortable">
<thead>
<tr>
<th>first name</th>
<th>last name</th>
<th>age</th>
<th>total</th>
<th>discount</th>
<th>date</th>
</tr>
</thead>
<tbody>
<tr>
<td>peter</td>
<td>parker</td>
<td>28</td>
<td>$9.99</td>
<td>20%</td>
<td>jul 6, 2006 8:14 am</td>
</tr>
<tr>
<td>john</td>
<td>hood</td>
<td>33</td>
<td>$19.99</td>
<td>25%</td>
<td>dec 10, 2002 5:14 am</td>
</tr>
<tr>
<td>clark</td>
<td>kent</td>
<td>18</td>
<td>$15.89</td>
<td>44%</td>
<td>jan 12, 2003 11:14 am</td>
</tr>
</tbody>
</table>
</body>
</html>
Παρακατω μπορειτε να κατεβασε τον κωδικα ή αν θελετε μπορειτε να δειτε ενα demo εδω.
(xDevGR)Sorting_table_data_with_Javascript.html (1.28 kb)