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 1i < rows.lengthi++) {

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 1page <= this.pagespage++)

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 ...

C# DateTime Format

Posted by Prince | 5:11:00 PM | | 0 comments »


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.
SpecifierDateTimeFormatInfo propertyPattern value (for en-US culture)
tShortTimePatternh:mm tt
dShortDatePatternM/d/yyyy
TLongTimePatternh:mm:ss tt
DLongDatePatterndddd, MMMM dd, yyyy
f(combination of D and t)dddd, MMMM dd, yyyy h:mm tt
FFullDateTimePatterndddd, 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
mMMonthDayPatternMMMM dd
yYYearMonthPatternMMMM, yyyy
rRRFC1123Patternddd, dd MMM yyyy HH':'mm':'ss 'GMT' (*)
sSortableDateTi­mePatternyyyy'-'MM'-'dd'T'HH':'mm':'ss (*)
uUniversalSorta­bleDateTimePat­ternyyyy'-'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 ...

Related Posts Plugin for WordPress, Blogger...