-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html?p=718.html
38 lines (38 loc) · 31.9 KB
/
index.html?p=718.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE HTML> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://ogp.me/ns/fb#"> <head> <title>Knockout.js DataTable bindings | Web design and development in Salisbury and Portsmouth</title> <meta name="description" content="Josh Buckley"/> <link rel="shortcut icon" href="favicon.ico"/> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <link rel="stylesheet" href="wp-content/themes/CircloSquero/style.css" type="text/css" media="screen,projection"/> <meta property="og:type" content="article"/> <meta property="og:title" content="Knockout.js DataTable bindings"/> <meta property="og:url" content="http://www.joshbuckley.co.uk/2011/07/knockout-js-datatable-bindings/"/> <meta property="article:published_time" content="2011-07-30"/> <meta property="article:modified_time" content="2011-07-30"/> <meta property="article:author" content="http://www.joshbuckley.co.uk/author/admin/"/> <meta property="article:section" content="Code"/> <meta property="article:tag" content="datatables"/> <meta property="article:tag" content="javascript"/> <meta property="article:tag" content="jquery"/> <meta property="article:tag" content="knockout.js"/> <meta property="og:site_name" content="Web design and development in Salisbury and Portsmouth"/> <meta name="twitter:card" content="summary"/> <link rel="alternate" type="application/rss+xml" title="Web design and development in Salisbury and Portsmouth » Knockout.js DataTable bindings Comments Feed" href="2011/07/knockout-js-datatable-bindings/feed/"/> <link rel='stylesheet' id='contact-form-7-css' href="wp-content/plugins/contact-form-7/includes/css/styles.css" type='text/css' media='all'/> <!--[if lte IE 8]> <style type="text/css" media="screen"> .roundbox, .commentWrap, #authorBoxx, .formm input, .comment-form-comment textarea, #rm_button, #tw_button, a.mediumbutton, .bigbutton, .smallbutton, #FooterWrap input, #FooterWrap textarea, .wpcf7-submit, .CStagcloud a, #twitter_update_listCS li { behavior: url('http://www.joshbuckley.co.uk/wp-content/themes/CircloSquero/PIE.php'); zoom: 1; position: relative; z-index: 99; } </style> <![endif]--> <!--[if IE 8]> <style type="text/css" media="screen"> .slidingContentTitleCSCS, .slidingContentContentCSCS { behavior: url('http://www.joshbuckley.co.uk/wp-content/themes/CircloSquero/PIE.php'); zoom: 1; position: relative; z-index: 99; } </style> <![endif]--> <script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script type='text/javascript' src="wp-content/plugins/wp-nivo-slider/js/jquery.nivo.slider.pack.js"></script> <link rel='prev' title='Finally launched my portfolio site' href="2011/07/finally-launched-my-portfolio-site"/> <link rel='canonical' href='2011/07/knockout-js-datatable-bindings/'/> <link rel='shortlink' href="2011/07/knockout-js-datatable-bindings/"/> <meta id="syntaxhighlighteranchor" name="syntaxhighlighter-version" content="3.1.3"/> <link rel="stylesheet" type="text/css" media="screen" href="wp-content/themes/CircloSquero/fonts_sansation.css"/> <link rel="stylesheet" type="text/css" media="screen" href="wp-content/themes/CircloSquero/gray_blue.css"/> <script type="text/javascript" src="wp-content/themes/CircloSquero/scripts/circlosquero_effects.js"></script> <link rel="stylesheet" type="text/css" media="screen" href="wp-content/themes/CircloSquero/backgrounds/bg0.css"/> <link rel="stylesheet" type="text/css" media="screen" href="wp-content/themes/CircloSquero/nivo_slider/nivo-slider.css"/> <link rel="stylesheet" type="text/css" media="screen" href="wp-content/themes/CircloSquero/scripts/prettyPhoto.css"/> <link rel="stylesheet" type="text/css" media="screen" href="wp-content/themes/CircloSquero/modifications.css"/> <script type="text/javascript" src="wp-content/themes/CircloSquero/scripts/superfish.js"></script> <script type="text/javascript" src="wp-content/themes/CircloSquero/scripts/twitter-rss-with-rt.js"></script> <script type="text/javascript" src="wp-content/themes/CircloSquero/scripts/featuredworks.js"></script> <script type="text/javascript" src="wp-content/themes/CircloSquero/scripts/supersubs.js"></script> <script type="text/javascript" src="wp-content/themes/CircloSquero/scripts/hoverIntent.js"></script> <script type="text/javascript" src="wp-content/themes/CircloSquero/scripts/jquery.backgroundPosition.js"></script> <script type="text/javascript" src="wp-content/themes/CircloSquero/scripts/jquery.color.js"></script> <script type="text/javascript" src="wp-content/themes/CircloSquero/scripts/jquery.prettyPhoto.js" charset="utf-8"></script> <style type="text/css"> #slider { background:url("wp-content/plugins/wp-nivo-slider/images/loading.gif") no-repeat scroll 50% 50% #202834; } #slider img { position:absolute; top:0px; left:0px; display:none; } #slider a { border:0 none; display:block; } /* The Nivo Slider styles */ .nivoSlider { position:relative; } .nivoSlider img { position:absolute; top:0px; left:0px; } /* If an image is wrapped in a link */ .nivoSlider a.nivo-imageLink { position:absolute; top:0px; left:0px; width:100%; height:100%; border:0; padding:0; margin:0; z-index:60; display:none; } /* The slices in the Slider */ .nivo-slice { display:block; position:absolute; z-index:50; height:100%; } /* Caption styles */ .nivo-description { position:absolute; left:0px; top:200px; background: url("wp-content/plugins/wp-nivo-slider/images/white_bg.png") repeat; color:#fff; /* Overridden by captionOpacity setting */ z-index:89; } .nivo-caption p { padding:5px 40px; margin:0; font: 36px 'SansationBold', Verdana, sans-serif; text-shadow: #000000 0 -1px 0; } .nivo-description p { padding:5px 40px; margin:0; font: 18px 'SansationLight', Verdana, sans-serif; color: #000000; } .nivo-caption a { display:inline !important; } .nivo-html-caption { display:none; } /* Direction nav styles (e.g. Next and Prev) */ .nivo-directionNav a { position:absolute; top:45%; z-index:99; cursor:pointer; } .nivo-prevNav { left:0px; } .nivo-nextNav { right:0px; } .nivo-controlNav { bottom:30px; left:40px; position:absolute; z-index:99; } .nivo-controlNav a { background:url("wp-content/plugins/wp-nivo-slider/images/bullets.png") no-repeat scroll -24px 0 transparent; border:0 none; display:block; float:left; height:24px; margin-right:3px; text-indent:-9999px; width:24px; } .nivo-controlNav a.active { background-position:0px 0; } .nivo-controlNav a { cursor:pointer; position:relative; z-index:99; } .nivo-controlNav a.active { font-weight:bold; } .nivo-directionNav a { background:url("wp-content/plugins/wp-nivo-slider/images/arrows.png") no-repeat scroll 0 0 transparent; border:0 none; display:block; height:34px; text-indent:-9999px; width:32px; } a.nivo-nextNav { background-position:-32px 0; right:10px; } a.nivo-prevNav { left:10px; } </style> <script type="text/javascript" >
jQuery(document).ready(function(){
jQuery('#navigation ul').superfish({
animation: {opacity:'show'},
autoArrows: false, // slide-down effect without fade-in
delay: 500 // 0.5 second delay on mouseout
});
});
</script> <!--[if IE 7]> <link rel="stylesheet" type="text/css" media="screen" href="/wp-content/themes/CircloSquero/iesucks.css" /> <![endif]--> <link rel="stylesheet" type="text/css" media="screen" href="wp-content/themes/CircloSquero/nivo-inline.css"/> </head> <body> <div class="wrapper"> <div id="topbg"> <div id="logoandNav"> <div id="logo"> <a href="index.html"> <img src="logo_exported.png" alt="Web design and development in Salisbury and Portsmouth"/></a> </div> <div id="navigation"> <div id="navWrap"> <div class="menu-main-container"><ul id="menu-main" class="menu"><li id="menu-item-507" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-507"><a href="index.html">Home</a></li> <li id="menu-item-502" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-502"><a href="services/">Services</a> <ul class="sub-menu"> <li id="menu-item-553" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-553"><a href="services/design/">Design</a></li> <li id="menu-item-552" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-552"><a href="services/content-managed-websites/">Content Managed Websites</a></li> <li id="menu-item-551" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-551"><a href="services/ecommerce-solutions/">Ecommerce Solutions</a></li> <li id="menu-item-550" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-550"><a href="services/search-engine-optimisation/">Search Engine Optimisation</a></li> <li id="menu-item-549" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-549"><a href="services/custom-development/">Custom Development</a></li> <li id="menu-item-548" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-548"><a href="services/hosting-and-maintenance/">Hosting and Maintenance</a></li> <li id="menu-item-547" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-547"><a href="services/low-cost-sites/">Low Cost Sites</a></li> </ul> </li> <li id="menu-item-503" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-503"><a href="portfolio/">Portfolio</a></li> <li id="menu-item-504" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-504"><a href="blog/">Blog</a></li> <li id="menu-item-501" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-501"><a href="about/">About</a></li> <li id="menu-item-505" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-505"><a href="contact/">Contact</a></li> </ul></div> </div> </div> </div> </div> <div class="shadowBg"> <div id="topinfobar"> <div id="pageinfoFW"> <h2>Knockout.js DataTable bindings</h2> </div> <div class="clear"></div> </div> </div> <div id="separator22"></div> <div class="shadowBg"> <div class="breadcrumbs"> <a title="Go to Home." href="index.html" class="site-home">Home</a> > <a title="Go to the Code category archives." href="category/code/" class="category">Code</a> > Knockout.js DataTable bindings <div class="separatorDots hcsdt separatorDotsPage2"></div> </div> <div class="contentWrap"> <div class="singlePostCS"> <h1 class="titleCS"><a href="2011/07/knockout-js-datatable-bindings/">Knockout.js DataTable bindings</a></h1> <div class="metaBox"> <div class="dateMeta roundbox">Jul 30, 2011 </div> <div class="authorMeta roundbox">By <a href="author/admin/" title="Posts by Josh" rel="author">Josh</a></div> <div class="categoryMeta roundbox"><a href="category/code/" title="View all posts in Code" rel="category tag">Code</a></div> <div class="commentMeta roundbox">10 Comments</div> </div><div class="clear"></div> <p>I’ve recently started using <a href="http://knockoutjs.com/">knockout.js</a>, which is an implementation of Model-View-ViewModel (MVVM) for Javascript. Well, it covers the View-ViewModel part because the actual data model is on the server.</p> <p>Along with Knockout, I’ve been using jQuery UI – which I’ve been using for years anyway.</p> <p>Today, I needed a table widget. There isn’t currently one available in jQuery UI, though one is being developed, so I searched for an alternative. I came across <a href="http://www.datatables.net/">DataTables</a> (well, I’d actually used it before) – but there wasn’t a Knockout binding available. So I developed one, and I’m making it available under the MIT licence.<span id="more-718"></span></p> <h2>Demos</h2> <p>Everyone loves demos, so here are a few.</p> <ol> <li>Basic usage (no options): <a href="http://jsfiddle.net/vB3Aj/">http://jsfiddle.net/vB3Aj/</a></li> <li>With options (and jQuery UI theming): <a href="http://jsfiddle.net/tdppH/1/">http://jsfiddle.net/tdppH/1/</a></li> </ol> <h2>Usage</h2> <p>I’ve set up the demos on jsfiddle to use as little code as possible, so you’ll probably be able to work it out from those.</p> <p>Any questions though, post in the comments.</p> <h2>Download</h2> <p><a href="wp-content/uploads/2011/07/knockout.bindingHandlers.dataTable.js" target="_blank">Download Knockout.js DataTables binding</a></p> <div class="clear"></div> <br/> <div id="tags"> Tags: <a href="tag/datatables/" rel="tag">datatables</a>, <a href="tag/javascript/" rel="tag">javascript</a>, <a href="tag/jquery/" rel="tag">jquery</a>, <a href="tag/knockout-js/" rel="tag">knockout.js</a> </div> <div class="separatorDots separatorDots222"></div> <div id="aboutAuthor"> <h2>About the Author</h2> <div id="authorBoxx"> <div id="authorAvatar"> <img alt='' src="http://0.gravatar.com/avatar/ec38d909d75d35b972c8b6bec96b0385?s=60&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class='avatar avatar-60 photo' height='60' width='60'/> </div> <div id="authorInfo"> <h3>Josh</h3> </div> <div class="clear"></div> </div> </div> <div class="separatorDots separatorDots222 afterAboutAuthor"></div> <div id="comments"> <h3 class="comments-title">Comments:</h3> <ol class="commentlist"> <li class="comment even thread-even depth-1" id="li-comment-21"> <div id="comment-21" class="commentWrap"> <div class="com_author_namer"> <img alt='' src="http://1.gravatar.com/avatar/f4749cce627b584fb9e59966a5d2c924?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class='avatar avatar-60 photo' height='60' width='60'/> <div class="comm_reply_box"> <a class='comment-reply-link' href="2011/07/knockout-js-datatable-bindings/%3Freplytocom=21.html#respond" onclick='return addComment.moveForm("comment-21", "21", "respond", "718")'>Reply</a> </div> </div> <div class="com_wrap"> <div class="comment-meta commentmetadata"> <span class="authorFont"><a href="http://blueskyonmars.com/" rel='external nofollow' class='url'>Kevin Dangoor</a></span> said:<br/> July 31, 2011 at 5:01 am</div> <p>Very nice to see this! I’m a big fan of both declarative binding and DataTables, and I was just looking at Knockout. The only drawback I see to this plugin is that it appears that the entire table is regenerated for every change, rather than just adding/removing rows. Am I reading that correctly?</p> <p>As someone just looking at Knockout, this was my first introduction to custom bindings, so this was a helpful example. Thanks!</p> </div><div class="clear"> </div> </div> <div class="clear"> </div> <div class="commentSeparator"> </div> <div class="clear"> </div> <ul class='children'> <li class="comment byuser comment-author-admin bypostauthor odd alt depth-2 comm_reply" id="li-comment-23"> <div id="comment-23" class="commentWrap"> <div class="com_author_namer"> <img alt='' src="http://0.gravatar.com/avatar/ec38d909d75d35b972c8b6bec96b0385?s=60&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class='avatar avatar-60 photo' height='60' width='60'/> <div class="comm_reply_box"> <a class='comment-reply-link' href="2011/07/knockout-js-datatable-bindings/%3Freplytocom=23.html#respond" onclick='return addComment.moveForm("comment-23", "23", "respond", "718")'>Reply</a> </div> </div> <div class="com_wrap"> <div class="comment-meta commentmetadata"> <span class="authorFont">Josh</span> replied:<br/> July 31, 2011 at 10:42 am</div> <p>Yes, you’re correct, but unfortunately the table regen seems to be a limitation of DataTables itself – their own “Add Row” example shows the entire tbody being regenerated. If you inspect it in Firebug, then add a row, Firebug gives it a yellow highlight to indicate a dom change. (<a href="http://www.datatables.net/release-datatables/examples/api/add_row.html" rel="nofollow">http://www.datatables.net/release-datatables/examples/api/add_row.html</a>).</p> <p>Glad you’ve found it useful though!</p> </div><div class="clear"> </div> </div> <div class="clear"> </div> <div class="commentSeparator"> </div> <div class="clear"> </div> <ul class='children'> <li class="comment even depth-3 comm_reply" id="li-comment-52"> <div id="comment-52" class="commentWrap"> <div class="com_author_namer"> <img alt='' src="http://0.gravatar.com/avatar/02dfecae7cab53753a210d191180274e?s=60&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class='avatar avatar-60 photo' height='60' width='60'/> <div class="comm_reply_box"> <a class='comment-reply-link' href="2011/07/knockout-js-datatable-bindings/%3Freplytocom=52.html#respond" onclick='return addComment.moveForm("comment-52", "52", "respond", "718")'>Reply</a> </div> </div> <div class="com_wrap"> <div class="comment-meta commentmetadata"> <span class="authorFont"><a href="http://www.datatables.net/" rel='external nofollow' class='url'>Allan</a></span> replied:<br/> November 22, 2011 at 1:00 pm</div> <p>Its not so much of a complete regen as a rearrangement. The elements in the TBODY that can be reused are (i.e. the TR elements are held in a Javascript variable and appended to the table’s body as required). As such, any static events or properties assigned to the nodes are retained, since it isn’t actually creating a new node (unless of course you are adding a new row).</p> </div><div class="clear"> </div> </div> <div class="clear"> </div> <div class="commentSeparator"> </div> <div class="clear"> </div> </li> </ul> </li> </ul> </li> <li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-24"> <div id="comment-24" class="commentWrap"> <div class="com_author_namer"> <img alt='' src="http://0.gravatar.com/avatar/40b3e8d38b923595a1a62ce411ee03bc?s=60&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class='avatar avatar-60 photo' height='60' width='60'/> <div class="comm_reply_box"> <a class='comment-reply-link' href="2011/07/knockout-js-datatable-bindings/%3Freplytocom=24.html#respond" onclick='return addComment.moveForm("comment-24", "24", "respond", "718")'>Reply</a> </div> </div> <div class="com_wrap"> <div class="comment-meta commentmetadata"> <span class="authorFont"><a href="http://www.decipherinc.com/n/blog/development-and-engineering-team/2011/04/angular-model-single-source-truth" rel='external nofollow' class='url'>Kevin Turner</a></span> said:<br/> August 3, 2011 at 8:56 pm</div> <p>I’m very happy to see someone digging in to this. When I was looking at data-binding frameworks, this was a big concern of mine; data binding looked great for many cases, but what about those where I’m throwing a lot of things around with datatables?<br/> I still haven’t used Knockout in Real Life yet, but we’re strongly considering it for some projects on the table right now, and seeing how this works will help.</p> </div><div class="clear"> </div> </div> <div class="clear"> </div> <div class="commentSeparator"> </div> <div class="clear"> </div> </li> <li class="comment even thread-even depth-1" id="li-comment-34"> <div id="comment-34" class="commentWrap"> <div class="com_author_namer"> <img alt='' src="http://1.gravatar.com/avatar/1753228b982d7e0cc8136b84037000f8?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class='avatar avatar-60 photo' height='60' width='60'/> <div class="comm_reply_box"> <a class='comment-reply-link' href="2011/07/knockout-js-datatable-bindings/%3Freplytocom=34.html#respond" onclick='return addComment.moveForm("comment-34", "34", "respond", "718")'>Reply</a> </div> </div> <div class="com_wrap"> <div class="comment-meta commentmetadata"> <span class="authorFont">Niklas Pettersson</span> said:<br/> September 19, 2011 at 2:54 pm</div> <p>Nice job!</p> <p>I have a question about how we can data-bind to a object data model that looks like [{"id":1, "name" : "Josh"}, {...}] instead of the example data model ["data1", "data2"] ?</p> </div><div class="clear"> </div> </div> <div class="clear"> </div> <div class="commentSeparator"> </div> <div class="clear"> </div> <ul class='children'> <li class="comment byuser comment-author-admin bypostauthor odd alt depth-2 comm_reply" id="li-comment-51"> <div id="comment-51" class="commentWrap"> <div class="com_author_namer"> <img alt='' src="http://0.gravatar.com/avatar/ec38d909d75d35b972c8b6bec96b0385?s=60&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class='avatar avatar-60 photo' height='60' width='60'/> <div class="comm_reply_box"> <a class='comment-reply-link' href="2011/07/knockout-js-datatable-bindings/%3Freplytocom=51.html#respond" onclick='return addComment.moveForm("comment-51", "51", "respond", "718")'>Reply</a> </div> </div> <div class="com_wrap"> <div class="comment-meta commentmetadata"> <span class="authorFont">Josh</span> replied:<br/> November 21, 2011 at 1:02 am</div> <p>Hi Niklas,</p> <p>Sorry about the delay in replying!</p> <p>You should be able to supply any data that is accepted by DataTables’ fnAddData() method (see <a href="http://datatables.net/api" rel="nofollow">http://datatables.net/api</a>). It states that you can supply either Arrays or Objects – I’ve just had a quick try with objects but the table wouldn’t render, not sure why though. </p> <p>Maybe you’ll be able to find something useful on the API page above. If you do, let me know!</p> </div><div class="clear"> </div> </div> <div class="clear"> </div> <div class="commentSeparator"> </div> <div class="clear"> </div> <ul class='children'> <li class="comment even depth-3 comm_reply" id="li-comment-457"> <div id="comment-457" class="commentWrap"> <div class="com_author_namer"> <img alt='' src="http://1.gravatar.com/avatar/5588422b9ee1bc2e659dc6be0c409eeb?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class='avatar avatar-60 photo' height='60' width='60'/> <div class="comm_reply_box"> <a class='comment-reply-link' href="2011/07/knockout-js-datatable-bindings/%3Freplytocom=457.html#respond" onclick='return addComment.moveForm("comment-457", "457", "respond", "718")'>Reply</a> </div> </div> <div class="com_wrap"> <div class="comment-meta commentmetadata"> <span class="authorFont"><a href="http://www.else.co.nz/" rel='external nofollow' class='url'>Leigh Harrison</a></span> replied:<br/> June 9, 2012 at 12:50 am</div> <p>This is a wonderful binding; it’s lightweight but effective. However, I cannot get it work with two dimensional data arrays such as this.</p> <p> function users(one, two three){<br/> this.one = ko.observable(one);<br/> this.two = ko.observable(two);<br/> this.three = ko.observable(three);<br/> }</p> <p>I’m sure I’m simply failing to grasp the paradigm, but I’d give a lot for a simple example of column population by key instead of index.</p> </div><div class="clear"> </div> </div> <div class="clear"> </div> <div class="commentSeparator"> </div> <div class="clear"> </div> </li> </ul> </li> </ul> </li> <li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-48"> <div id="comment-48" class="commentWrap"> <div class="com_author_namer"> <img alt='' src="http://0.gravatar.com/avatar/8c7dddcd44ed7b9e63469f57e8f7efa3?s=60&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class='avatar avatar-60 photo' height='60' width='60'/> <div class="comm_reply_box"> <a class='comment-reply-link' href="2011/07/knockout-js-datatable-bindings/%3Freplytocom=48.html#respond" onclick='return addComment.moveForm("comment-48", "48", "respond", "718")'>Reply</a> </div> </div> <div class="com_wrap"> <div class="comment-meta commentmetadata"> <span class="authorFont"><a href="http://www.colourblendcreative.com/" rel='external nofollow' class='url'>Orson</a></span> said:<br/> November 17, 2011 at 11:46 am</div> <p>Paging doesn’t work without the “bJQueryUI” option activated. Is there a way i could have my paging working without the options set to true?</p> </div><div class="clear"> </div> </div> <div class="clear"> </div> <div class="commentSeparator"> </div> <div class="clear"> </div> <ul class='children'> <li class="comment byuser comment-author-admin bypostauthor even depth-2 comm_reply" id="li-comment-50"> <div id="comment-50" class="commentWrap"> <div class="com_author_namer"> <img alt='' src="http://0.gravatar.com/avatar/ec38d909d75d35b972c8b6bec96b0385?s=60&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class='avatar avatar-60 photo' height='60' width='60'/> <div class="comm_reply_box"> <a class='comment-reply-link' href="2011/07/knockout-js-datatable-bindings/%3Freplytocom=50.html#respond" onclick='return addComment.moveForm("comment-50", "50", "respond", "718")'>Reply</a> </div> </div> <div class="com_wrap"> <div class="comment-meta commentmetadata"> <span class="authorFont">Josh</span> replied:<br/> November 21, 2011 at 12:54 am</div> <p>Hi Orson,</p> <p>The paging doesn’t appear on my demo as I’ve only styled the table – not the entire datatable. If I had referenced the full datatables CSS, the Prev/Next buttons would be visible. </p> <p>To check this, you can use Firebug to inspect the generated table. There will be 2 DIVs in the same level as the table – one with a class “dataTables_info” which is the “Showing 1 to 10 of…” description, and another with a class “dataTables_paginate paging_two_button”. Inside this DIV are two more, which are the Prev/Next buttons. </p> <p>Hope that helps!</p> </div><div class="clear"> </div> </div> <div class="clear"> </div> <div class="commentSeparator"> </div> <div class="clear"> </div> </li> </ul> </li> <li class="comment odd alt thread-even depth-1" id="li-comment-66"> <div id="comment-66" class="commentWrap"> <div class="com_author_namer"> <img alt='' src="http://0.gravatar.com/avatar/ebcd6c7a71bbe829adf8fb7a1201bcd4?s=60&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class='avatar avatar-60 photo' height='60' width='60'/> <div class="comm_reply_box"> <a class='comment-reply-link' href="2011/07/knockout-js-datatable-bindings/%3Freplytocom=66.html#respond" onclick='return addComment.moveForm("comment-66", "66", "respond", "718")'>Reply</a> </div> </div> <div class="com_wrap"> <div class="comment-meta commentmetadata"> <span class="authorFont"><a href="http://www.cogshift.com/" rel='external nofollow' class='url'>Lucas Martin</a></span> said:<br/> December 9, 2011 at 1:59 am</div> <p>Heya Josh,</p> <p>Your blog post inspired me to create a pretty fully featured databinding in knockout js that integrates with datatables. If you’re interested you can check it out at: <a href="https://github.com/CogShift/Knockout.Extensions" rel="nofollow">https://github.com/CogShift/Knockout.Extensions</a></p> <p>With a demo’s at: <a href="http://jsfiddle.net/ducka/fPaQs/" rel="nofollow">http://jsfiddle.net/ducka/fPaQs/</a> and <a href="http://jsfiddle.net/ducka/haq2y/" rel="nofollow">http://jsfiddle.net/ducka/haq2y/</a></p> <p>Cheers!</p> </div><div class="clear"> </div> </div> <div class="clear"> </div> <div class="commentSeparator"> </div> <div class="clear"> </div> </li> </ol> <div id="posalji_komm"> <div id="respond"> <h3 id="reply-title"><h3 class="comments-title">Leave a Reply</h3> <small><a rel="nofollow" id="cancel-comment-reply-link" href="2011/07/knockout-js-datatable-bindings/#respond" style="display:none;">Cancel Reply</a></small></h3> <form action="http://www.joshbuckley.co.uk/wp-comments-post.php" method="post" id="commentform"> <p class="comment-form-author formfloatl formm"><label for="author">Name (required):</label> <br/> <input id="author" name="author" type="text" size="30" tabindex="1"/></p> <p class="comment-form-email formfloatl formm"><label for="email">Email (required):</label><br/> <input id="email" name="email" type="text" size="30" tabindex="2"/></p> <p class="comment-form-url formfloatr formm"><label for="url">Website:</label><br/><input id="url" name="url" type="text" size="30" tabindex="3"/></p><div class="clear"></div> <p class="comment-form-comment"><label for="comment"></label><br/><textarea id="comment" name="comment" cols="45" rows="8" tabindex="4" aria-required="true"></textarea></p> <p class="form-submit"> <input name="submit" type="submit" id="submitC" value="Post Comment"/> <input type='hidden' name='comment_post_ID' value='718' id='comment_post_ID'/> <input type='hidden' name='comment_parent' id='comment_parent' value='0'/> </p> <p style="display: none;"><input type="hidden" id="akismet_comment_nonce" name="akismet_comment_nonce" value="923529d63b"/></p> </form> </div> </div> </div> </div> <div class="sidebarRight"> <ul> <li class="widgetSidebar"><h2>Categories</h2><ul class="xoxo categories"><li class="cat-item cat-item-30"><a href="category/code/" title="View all posts filed under Code">Code</a></li><li class="cat-item cat-item-29"><a href="category/general/" title="View all posts filed under General">General</a></li></ul></li> </ul> </div> <div class="clear"></div> </div> <div id="Footer"> <div id="FooterSeparatorNT"></div> <div id="FooterWrap"> <div id="FooterWidgetsLeft"> <ul> <li class="widgetFooter"><h2>What I offer</h2> <div class="textwidget"><p>I'm primarily a web developer - I take the website from design through to production.</p> <p>I can also offer design, web app production, and other custom software development.</p> </div> </li> </ul> </div> <div id="FooterWidgetsCenter"> <ul> <li class="widgetFooter"><h2>Where I work</h2> <div class="textwidget"><p>I am usually based in Salisbury, Wiltshire. However, I'm able to work for anyone in the world over the internet, keeping in touch using messaging tools such as Skype.</p> </div> </li> </ul> </div> <div id="FooterWidgetsRight"> <ul> <li class="widgetFooter"><h2>Latest from the Blog</h2><ul class="enhanced-recent-posts"> <li> <a href="2011/07/knockout-js-datatable-bindings/">Knockout.js DataTable bindings</a> </li> <li> <a href="2011/07/finally-launched-my-portfolio-site">Finally launched my portfolio site</a> </li> </ul> </li> </ul> </div> <div class="clear"></div> </div> </div> </div> <div id="footer2"> <div id="footer2wrap"> <div id="copyright"> © 2014 Josh Buckley. All rights reserved </div> <div id="Social_Networks"> <a href="http://www.twitter.com/joshbuckley182" target="_blank"><img class="socialicons" src="wp-content/themes/CircloSquero/images/social_networks/twitter.jpg" alt="twitter"/></a> <a href="http://uk.linkedin.com/in/joshbuckley182" target="_blank"><img class="socialicons" src="wp-content/themes/CircloSquero/images/social_networks/linkedin.jpg" alt="linkedin"/></a> </div> <div class="clear"> </div> <script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.socialicons').fadeTo(0, 0.5);
jQuery('.socialicons').hover(function(){
jQuery(this).stop().fadeTo(300, 1);
}, function() {
jQuery(this).stop().fadeTo(500, 0.5);
});
});
</script> </div> </div> </div> <script type="text/javascript">
jQuery(document).ready(function(){
jQuery("a[rel^='prettyPhoto']").prettyPhoto({
theme: 'facebook'
});
});
</script> <script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-24074770-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga);
})();
</script> <div id="su-footer-links" style="text-align: center;"></div><script type='text/javascript' src="wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js"></script> <script type='text/javascript'>
/* <![CDATA[ */
var _wpcf7 = {"loaderUrl":"http:\/\/www.joshbuckley.co.uk\/wp-content\/plugins\/contact-form-7\/images\/ajax-loader.gif","sending":"Sending ...","cached":"1"};
/* ]]> */
</script> <script type='text/javascript' src="wp-content/plugins/contact-form-7/includes/js/scripts.js"></script> </body> </html>
<!--WP-HTML-Compression saved 16.94%. Bytes before:38487, after:31966-->