Who doesn’t like formatted HTML tables, especially when the table is large and you wish there was an easy way to format, enhance and search the data within. Well, look no further than DataTables. DataTables is a jQuery plugin that will essentially enable you to do just that.
Test Drive the table below:
$(document).ready(function() { $('#example').dataTable();});You can disable features that you don’t wish to use.
$(document).ready(function() { $('#example').dataTable( {"bPaginate": false,
"bLengthChange": false,
"bFilter": true,
"bSort": false,
"bInfo": false,
"bAutoWidth": false } );
} );
The page controls which are used by default in DataTables (forward and backward buttons only) are great for most situations, but there are cases where you may wish to customize the controls presented to the end user. This is made simple by DataTables through its extensible pagination mechanism. There are two types of pagination controls built into DataTables: two_button (default) and full_numbers. To switch between these two types, use the sPaginationType initialization parameter.
$(document).ready(function() {$('#example').dataTable({"sPaginationType": "full_numbers"});
});
You can create custom search/filter for each of the columns in the table:
var asInitVals = new Array();
$(document).ready(function() {var oTable = $('#example').dataTable( {
"oLanguage": {"sSearch": "Search all columns:"
}
} );
$("tfoot input").keyup( function () {
/* Filter on the column (the index) of this element */oTable.fnFilter( this.value, $("tfoot input").index(this) );
} );
/* * Support functions to provide a little bit of 'user friendlyness' to the textboxes in * the footer */$("tfoot input").each( function (i) {
asInitVals[i] = this.value;} );
$("tfoot input").focus( function () {
if ( this.className == "search_init" )
{this.className = "";
this.value = "";
}
} );
$("tfoot input").blur( function (i) {
if ( this.value == "" )
{this.className = "search_init";
this.value = asInitVals[$("tfoot input").index(this)];
}
} );
} );
These are just a few features that I have personally worked with. There is a lot more you can do with the jQuery DataTable plugin. Checkout the full range of demos here
1: <script type="text/javascript" >
2: var o1 = {}; //create new object
3: o1.x = 3; //object property assignment
4: o1.x = 4; //modify property
5:
6: var o2 = { x: 3 }; //create object and initialize property
7:
8: //property can store any javascript values
9: var o3 = {
10: first: o2,
11: second: function (){ return 5;}
12: };
13:
14: //Dot (.) and Index[] are the same
15: o2.x === 3;
16: o2["x"] === 3;
17: o2["the answer!"] = 42 //but index refers to full range of property
18: </script>
|
1: <script type="text/javascript">
2:
3: var o1 = {};
4: o1.valueOf === "object Object"; // Q: where does the 'valueOf' come from? Ans: it comes from the prototype object
5:
6: var o2 = { valueOf: function (){ return 10; } }
7: o2.valueOf() === 10; // can be overridden by hiding
9: </script>
|
1: var location = Object.create(point2d);
2: location.name = "Mandalay Bay";
|
1: <script type="text/javascript">
2:
3: //data property can’t intercept reads/writes
4: var bankAccount = {
5: balance: 1257
6: };
7:
8: //accessor properties can intercept reads/writes
9: var bankAccount2 = {
10: get: function (){ return this._value; },
11: set: function (val){ this._value = val; }
12: };
13:
14: </script>
|
1: <script type="text/javascript">
2:
3: //data descriptors
4: var obj1 = {
5: value: 47,
6: writable: false, //can the value be changed
7: enumerable: true, //will the property be enumerated by "for..in"?
8: configurable:true //can the property descriptor be changed later?
9: };
10:
11: //accessor descriptors
12: var obj2 = {
13: get: function location(){ },
14: set: function location(){ },
15: enumerable: true,
16: configurable:true
17: };
18:
19: </script>
|
1: var o = { hello: 5 };
2: Object.getOwnPropertyDescriptor(o, "hello");
3: Object.getOwnPropertyDescriptor(Date, "now");
|
Object.getOwnPropertyDescriptor(HTMLElement.prototype, "innerHTML"); result: { get : function innerHTML() { [native code] } , set : function innerHTML() { [native code] } , enumerable : true, configurable : true } |
1: <script type="text/javascript">
2: function sum(x, y) { //functions can be defined with function declarations
3: return x + y;
4: }
5:
6: var sum2 = function (x, y) { //anonymous function expressions. returned value is stored in a variable
7: return x + y;
8: }
9:
10: var sum3 = sum; // the name of the function refers to the function value - sum
11:
12: function wrap(f) { //function can be passed to other functions
13: return f();
14: }
15:
16: warp(function (){ return 5;});
17:
18: </script>
|
2: function sum(x, y) { //functions can be defined with function declarations
3: return x + y;
4: }
//Note that sum function contains a length and a prototype property.
1: sum.length===2; //returns true
2: Object.getPrototypeOf(sum)===Function.prototype; //returns true
|
1: var obj = {
2: sum: function (x, y){ return x + y;}
3: }
4:
5: obj.sum(2, 3); //returns 5
|
1: var obj2 = {
2: offset: 7,
3: sum: function (x, y){ return x + y + this.offset;}
4: }
5: obj2.sum(3, 4); //returns 14
1: However Note:
2: var f = obj2.sum;
3: f(3, 4); //returns NaN
4: f.call(obj2, 3, 4); //returns 14
|
1: function Person(firstName, lastName) {
2: this.firstName = firstName;
3: this.lastName = lastName;
4: }
5:
6: var upen = new Person("Upendra", "Rao");
7:
8: upen.firstName+ " " + upen.lastName; //returns "Upendra Rao"
|
1: Person.prototype.getFullName = function () {
2: return this.firstName + " " + this.lastName;
3: }
4:
5: upen.getFullName(); //returns "Upendra Rao"
|
1: (function () {
2: var x = 5;
3: x === 5;
4: })(); //function is defined and call immediately
5: x ; //x is undefined
|
1: var outer = "set outside";
2: (function () {
3: outer = "set inside";
4: })();
5:
6: outer; //returns "set inside"
|
1: //Isolating from changes in outer variables
2: var outer = "set outside";
3: (function (outer) {
4: outer = "set inside";
5: setInterval(function (){ alert(outer); }, 3)
6: })(outer);
7:
8: outer = "reset outside";
|
Awesome presentation on Knockout JavaScript library by Steve Sanderson!
Knockout.js is a Open Source JavaScript Library. Knockout.js provides rich client-side interactivity even those not solved by jQuery. It provides a MVVM patern similar to Silverlight. Knockout does the following: dependency tracking, declarative binding, integrated templating.
Using ko.observable makes it possible to update the UI automatically when the view model changes. If you declare your model properties as observables, it will notify subscribers about changes.
dependentObservable updates the view model when the dependencies change.
In the above example when firstname or lastname changes, the changes are propagated automatically to Full Name.
Tracking Friends of Bert Smith:
Create a Constructor friend – any function can act as a constructor for a class.
Create an observableArray of friends which will notify the view model of changes.
Create a jQuery template to render the data.
Result:
Add a button to add “Another” friend and bind a click function to the view model.
<button data-bind=”click: addFriend”> Add Friend</button>
use push to add an element to an array.
Result:
Let’s track changes by adding a date element
Result: every time you add a friend, it reruns the whole template as you can see the time changes for all the elements in the template.
But with Knockout, we can update the DOM in a minimum way so that the template runs only for the new elements added.
Note that we are letting Knockout control the iteration for us. $each from the template is no longer needed.
Result:
Now let’s say you want to add and remove friends and want to make names of the friends you add editable.
So we will go back to the friends template and add a remove button and assign a “Remove” function on click. Also add an input box and data-bind it with the name of the friend function. Go back to the friend function and add a remove function as shown below.
Result:
Now say you want to track your friend if they were on twitter. If they are, you want display that using a check box and an textbox for their twitter name. Add isOnTwitter and twitterName to the friend function.
Go back to the friends template and add a checkbox and textbox with data-binding properties as shown below.
Result":
Now you may want the checkbox to appear only when the checkbox is checked.
Result:
The above functionality can also be achieved using adding a {{if …}} to a template, but that would mean the rendering the whole template every time the checkbox is clicked. With Knockout JavaScript, you can do this in a minimal way – just means faster, responsive apps.
Now I’d like to know the count of the numbers of friends I have.
Result:
Now I want to disable the Add friend button if there are more than 5 friends.
Result:
Now I’d like to save the data in JSON (JavaScript Object Notation) format. I can do that by sending an AJAX request to the server. ASP.NET has got a model binding for JSON its going to parse the data automatically by writing very little code. Add a save function to the view model as shown below. Note the use of $.ajax (jQuery) function to post my data to an action method of the MVC app called Save. Convert the data to JSON format using the ko object without observables to be sent to the server.
Add a save button and data-bind it to the save method of the model.
save method:
On the server, we need a controller to handle the request coming from the view. Note that no special parsing of JSON data is needed.
The person class closely resembles the JSON data structure MVC3’s JSON object binder can automatically does the binding for us. No special parsing is needed.
Result:
