Client-Side Paging with Tables:  

Most of the times, you don't need to paginate on the client side: if you have an enough small set of records to be displayed, I would suggest you to choose a scrollable <div/>.

Server-side web pagination is really needed when you have to display hundreds of records. You may fetch results from the DB using an offset and loading a single page for each HTTP request. SO I tried with the following script for client side paging in my HTML table.

I demonstrated how to use HTML tables on the client for a very simple client-side paging solution. I have heard from several people who point out the performance problems with large sets of data. I agree. This solution is best for a fairly fixed amount of data.

Step#1:
Include the following css in your page header;

<style type="text/css">

.pg-normal {
color: #000000;
font-size: 15px;
cursor: pointer;
background: #D0B389;
padding: 2px 4px 2px 4px;
}

.pg-selected {
color: #fff;
font-size: 15px;
background: #000000;
padding: 2px 4px 2px 4px;
}

table.yui {
font-family:arial;
border-collapse:collapse;
border: solid 3px #7f7f7f;
font-size:small;
}

table.yui td {
padding: 5px;
border-right: solid 1px #7f7f7f;
}

table.yui .even {
background-color: #EEE8AC;
}

table.yui .odd {
background-color: #F9FAD0;
}

table.yui th {
border: 1px solid #7f7f7f;
padding: 5px;
height: auto;
background: #D0B389;
}

table.yui th a {
text-decoration: none;
text-align: center;
padding-right: 20px;
font-weight:bold;
white-space:nowrap;
}

table.yui tfoot td {
border-top: 1px solid #7f7f7f;
background-color:#E1ECF9;
}

table.yui thead td {
vertical-align:middle;
background-color:#E1ECF9;
border:none;
}

table.yui thead .tableHeader {
font-size:larger;
font-weight:bold;
}

table.yui thead .filter {
text-align:right;
}

table.yui tfoot {
background-color:#E1ECF9;
text-align:center;
}

table.yui .tablesorterPager {
padding: 10px 0 10px 0;
}

table.yui .tablesorterPager span {
padding: 0 5px 0 5px;
}

table.yui .tablesorterPager input.prev {
width: auto;
margin-right: 10px;
}

table.yui .tablesorterPager input.next {
width: auto;
margin-left: 10px;
}

table.yui .pagedisplay {
font-size:10pt; 
width: 30px;
border: 0px;
background-color: #E1ECF9;
text-align:center;
vertical-align:top;
}
</style>

Step#2

Copy & paste the following script  in your page header;

<script type="text/javascript">

function Pager(tableName, itemsPerPage) {

this.tableName = tableName;

this.itemsPerPage = itemsPerPage;

this.currentPage = 1;

this.pages = 0;

this.inited = false;

this.showRecords = function(from, to) {

var rows = document.getElementById(tableName).rows;

// i starts from 1 to skip table header row

for (var i = 1; i < rows.length; i++) {

if (i < from || i > to)

rows[i].style.display = 'none';

else

rows[i].style.display = '';

}

}

this.showPage = function(pageNumber) {

if (! this.inited) {

alert("not inited");

return;

}

var oldPageAnchor = document.getElementById('pg'+this.currentPage);

oldPageAnchor.className = 'pg-normal';

this.currentPage = pageNumber;

var newPageAnchor = document.getElementById('pg'+this.currentPage);

newPageAnchor.className = 'pg-selected';

var from = (pageNumber - 1) * itemsPerPage + 1;

var to = from + itemsPerPage - 1;

this.showRecords(from, to);

}

this.prev = function() {

if (this.currentPage > 1)

this.showPage(this.currentPage - 1);

}

this.next = function() {

if (this.currentPage < this.pages) {

this.showPage(this.currentPage + 1);

}

}

this.init = function() {

var rows = document.getElementById(tableName).rows;

var records = (rows.length - 1);

this.pages = Math.ceil(records / itemsPerPage);

this.inited = true;

}

this.showPageNav = function(pagerName, positionId) {

if (! this.inited) {

alert("not inited");

return;

}

var element = document.getElementById(positionId);

var pagerHtml = '<span onclick="' + pagerName + '.prev();" class="pg-normal"> « Prev </span> ';

for (var page = 1; page <= this.pages; page++)

pagerHtml += '<span id="pg' + page + '" class="pg-normal" onclick="' + pagerName + '.showPage(' + page + ');">' + page + '</span> ';

pagerHtml += '<span onclick="'+pagerName+'.next();" class="pg-normal"> Next »</span>';

element.innerHTML = pagerHtml;

}

}

</script>

Stet#3

Define an ID on the table you want to paging that is "tablepaging" ; place an empty div in the place you want to display the navigation bar. that is "pageNavPosition"; include an initialization script at the bottom of your page.

<table id="tablepaging" class="yui" align="center">
<thead>
<tr> 
<th>Name </th>
<th>Major </th>
<th>Sex </th>
<th>English </th>
<th>Tamil </th>
<th>Calculus </th>
<th>Geometry </th>
</tr>
</thead>
<tbody>
<tr class="even">
<td>Student01 </td>
<td>Languages </td>
<td>M </td>
<td>80 </td>
<td>70 </td>
<td>75 </td>
<td>80 </td>
</tr>
<tr class="odd">

<td>Student02 </td>
<td>Languages </td>
<td>M </td>
<td>80 </td>
<td>70 </td>
<td>75 </td>
<td>80 </td>
</tr>
.
.
.

</tbody>
</table>
<div id="pageNavPosition" style="padding-top: 20px" align="center">
</div>
<script type="text/javascript"><!--
var pager = new Pager('tablepaging', 5);
pager.init();
pager.showPageNav('pager', 'pageNavPosition');
pager.showPage(1);
</script>

Online Demo:

Name	Major	Sex	English	Tamil	Calculus	Geometry
Student01	Languages	M	80	70	75	80
Student02	Mathematics	M	90	88	100	90
Student03	Languages	F	85	95	80	85
Student04	Languages	M	60	55	100	100
Student05	Languages	F	68	80	95	80
Student06	Mathematics	M	100	99	100	90
Student07	Mathematics	M	85	68	90	90
Student08	Languages	M	100	90	90	85
Student09	Mathematics	M	80	50	65	75
Student10	Languages	M	85	100	100	90
Student11	Languages	M	86	85	100	100
Student12	Mathematics	F	100	75	70	85
Student13	Languages	F	100	80	100	90
Student14	Languages	F	50	45	55	90
Student15	Languages	M	95	35	100	90
Student16	Languages	F	100	50	30	70
Student17	Languages	F	80	100	55	65
Student18	Mathematics	M	30	49	55	75
Student19	Languages	M	68	90	88	70
Student20	Mathematics	M	40	45	40	80
Student21	Languages	M	50	45	100	100
Student22	Mathematics	M	100	99	100	90
student23	Mathematics	M	82	77	0	79
Student23	Languages	F	85	80	80	80
student24	Languages	F	100	91	13	82

Read more ...

Add/Remove row using  javascript:

Sometimes we need a row-based control that can dynamically add/remove rows on the fly, without being bound to a database. For example, we give the user a row of text-boxes to enter a subject, Mark,and etc... If they need more than one row to enter multiple subjects, they click an Add button for each extra subject they need. Each row also has a Remove button in case the user needs to remove a subject.You have use the following code spinets to dynamically Add/Remove rows.

Following is the source.

Code

 <script language="javascript" type="text/javascript">

var counter = 0; 
function addNewRow() {

// Get the main Div in which all the other divs will be added var Container = document.getElementById('divContainer');

// Create a new div for holding text and button input elements var newDiv = document.createElement('div');

// Create a new text input var newText = document.createElement('input'); newText.type = "text";

//for testing
newText.value = counter++;

// Create buttons for creating and removing inputs var newAddButton = document.createElement('input'); newAddButton.type = "button";
newAddButton.value = " Add "; var newDelButton = document.createElement('input'); newDelButton.type = "button";
newDelButton.value = "Remove"; 

// Append new text input to the newDiv newDiv.appendChild(newText);

// Append new button inputs to the newDiv newDiv.appendChild(newAddButton); newDiv.appendChild(newDelButton);

// Append newDiv input to the divContainer div Container.appendChild(newDiv);

// Add a handler to button for deleting the newDiv from the divContainer

newAddButton.onclick = addNewRow; newDelButton.onclick = function() {
Container.removeChild(newDiv);
};
}

</script>

<div id="divContainer">
  <div>   
    <input type="text" > 
    <input type="button" value="Add" onclick="addNewRow();">
  </div>
</div>

---

Online Demo:

 This is an example for above code.

Read more ...

String Format for DateTime [C#]

This example shows how to format Date Time using String.Format method. All formatting can be done also using DateTime.ToString method.

Custom DateTime Formatting

There are following custom format specifiers y (year), M (month), d (day), h (hour 12), H (hour 24), m (minute), s (second), f (second fraction), F (second fraction, trailing zeroes are trimmed),t (P.M or A.M) and z (time zone).

Following examples demonstrate how are the format specifiers rewritten to the output.[C#]

// create date time 2008-03-09 16:05:07.123
DateTime dt = new DateTime(2008, 3, 9, 16, 5, 7, 123);

String.Format("{0:y yy yyy yyyy}", dt);  // "8 08 008 2008"   year
String.Format("{0:M MM MMM MMMM}", dt);  // "3 03 Mar March"  month

String.Format("{0:d dd ddd dddd}", dt);  // "9 09 Sun Sunday" day
String.Format("{0:h hh H HH}",     dt);  // "4 04 16 16"      hour 12/24
String.Format("{0:m mm}",          dt);  // "5 05"            minute

String.Format("{0:s ss}",          dt);  // "7 07"            second
String.Format("{0:f ff fff ffff}", dt);  // "1 12 123 1230"   sec.fraction
String.Format("{0:F FF FFF FFFF}", dt);  // "1 12 123 123"    without zeroes

String.Format("{0:t tt}",          dt);  // "P PM"            A.M. or P.M.
String.Format("{0:z zz zzz}",      dt);  // "-6 -06 -06:00"   time zone

You can use also date separator / (slash) and time sepatator : (colon). These characters will be rewritten to characters defined in the current DateTimeForma­tInfo.DateSepa­rator andDateTimeForma­tInfo.TimeSepa­rator.[C#]

// date separator in german culture is "." (so "/" changes to ".")
String.Format("{0:d/M/yyyy HH:mm:ss}", dt); // "9/3/2008 16:05:07" - english (en-US)
String.Format("{0:d/M/yyyy HH:mm:ss}", dt); // "9.3.2008 16:05:07" - german (de-DE)

Here are some examples of custom date and time formatting:[C#]

// month/day numbers without/with leading zeroes
String.Format("{0:M/d/yyyy}", dt);// "3/9/2008"
String.Format("{0:MM/dd/yyyy}", dt);// "03/09/2008"

// day/month names

String.Format("{0:ddd, MMM d, yyyy}", dt);// "Sun, Mar 9, 2008"
String.Format("{0:dddd, MMMM d, yyyy}", dt);// "Sunday, March 9, 2008"

// two/four digit year
String.Format("{0:MM/dd/yy}", dt);// "03/09/08"

String.Format("{0:MM/dd/yyyy}", dt);// "03/09/2008"

Standard DateTime Formatting

In DateTimeForma­tInfo there are defined standard patterns for the current culture. For example property ShortTimePattern is string that contains value h:mm tt for en-US culture and value HH:mm for de-DE culture.

Following table shows patterns defined in DateTimeForma­tInfo and their values for en-US culture. First column contains format specifiers for the String.Format method.

Specifier	DateTimeFormatInfo property	Pattern value (for en-US culture)
t	ShortTimePattern	h:mm tt
d	ShortDatePattern	M/d/yyyy
T	LongTimePattern	h:mm:ss tt
D	LongDatePattern	dddd, MMMM dd, yyyy
f	(combination of D and t)	dddd, MMMM dd, yyyy h:mm tt
F	FullDateTimePattern	dddd, MMMM dd, yyyy h:mm:ss tt
g	(combination of d and t)	M/d/yyyy h:mm tt
G	(combination of d and T)	M/d/yyyy h:mm:ss tt
m, M	MonthDayPattern	MMMM dd
y, Y	YearMonthPattern	MMMM, yyyy
r, R	RFC1123Pattern	ddd, dd MMM yyyy HH':'mm':'ss 'GMT' (*)
s	SortableDateTi­mePattern	yyyy'-'MM'-'dd'T'HH':'mm':'ss (*)
u	UniversalSorta­bleDateTimePat­tern	yyyy'-'MM'-'dd HH':'mm':'ss'Z' (*)
		(*) = culture independent

Following examples show usage of standard format specifiers in String.Format method and the resulting output.

[C#]

        String.Format("{0:t}", dt);  // "4:05 PM" ShortTime

String.Format("{0:d}", dt);  // "3/9/2008" ShortDate
String.Format("{0:T}", dt);  // "4:05:07 PM" LongTime
String.Format("{0:D}", dt);  // "Sunday, March 09, 2008" LongDate

String.Format("{0:f}", dt);  // "Sunday, March 09, 2008 4:05 PM" LongDate+ShortTime
String.Format("{0:F}", dt);  // "Sunday, March 09, 2008 4:05:07 PM" FullDateTime
String.Format("{0:g}", dt);  // "3/9/2008 4:05 PM" ShortDate+ShortTime

String.Format("{0:G}", dt);  // "3/9/2008 4:05:07 PM" ShortDate+LongTime
String.Format("{0:m}", dt);  // "March 09" MonthDay
String.Format("{0:y}", dt);  // "March, 2008" YearMonth

String.Format("{0:r}", dt);  // "Sun, 09 Mar 2008 16:05:07 GMT" RFC1123
String.Format("{0:s}", dt);  // "2008-03-09T16:05:07" SortableDateTime
String.Format("{0:u}", dt);  // "2008-03-09 16:05:07Z" UniversalSortableDateTime

Read more ...