Skip to content

Knockout Datatable is a library that can be used just like jQuery DataTables.

License

Notifications You must be signed in to change notification settings

jmvtrinidad/knockout-datagrid

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

34 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

ko-datagrid

KnockoutJs datagrid is a library that can be used just like jQuery.DataTables. It can be used in any UI that needs a paging or server side processing. It was inspired through the work of Ryan Niemeyer. It also provides class for ASP.NET MVC Model binding.

Please refer to demo

Knockout-datagrid supports

  • Javascript Source (var tbl = new ko.dataGrid.vm({ data: items, searchField: 'username' });)
  • Ajax Source (var tbl = new ko.dataGrid.vm({ url: 'Users/GetAll', searchField: 'username' });)
  • ServerSide Processing (var tbl = new ko.dataGrid.vm({ url: 'Users/GetPerPage', serverSide: true });)

##Getting started

  1. Include knockout, knockout-datagrid, bootstrap css, jQuery and blockUI .

    <!--Vendor-->
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
    
    <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.blockUI/2.70/jquery.blockUI.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-debug.js"></script>
    <script src="js/knockout-DataGrid.js"></script>
    <!--End Vendor-->
  2. Specify your html markup, you can also use this on any element that needs paging.

    <div id="htmlAjaxSource" data-bind="dataGrid: tbl">
       <table class="table table-bordered table-condensed">
           <thead>
               <tr>
                   <td>Username</td>
                   <td>CreatedOn/By</td>
               </tr>
           </thead>
           <tbody>
               <tr data-bind="visible: totalRows() === 0" style="background-color: #f9f9f9;">
                   <td colspan="3">No record/s to display.</td>
               </tr>
               <!--ko foreach: itemsOnCurrentPage-->
               <tr>
                   <td>
                       <a href="#" data-bind="text:username, click:$parent.alertInfo"></a>
                   </td>
                   <td data-bind="text:emailAddress"></td>
               </tr>
               <!--/ko-->
           </tbody>
       </table>
       <span data-bind="text:info()"></span>
    </div>
  3. Instantiate ko.dataGrid.vm, for more option please refer to the code.

    function AppViewModel() {
        this.tblAjaxSource = new ko.dataGrid.vm({ url: 'request/GetAjax.json', searchField: 'username' });
    }
  4. Apply Bindings

       ko.applyBindings(new AppViewModel());
  5. demo

##ASP.NET MVC Model binding

For JsonCamelCaseResult(), please refer to this answer on StackOverflow.

public ActionResult GetData(DataGridRequest<string> request)
{
    using (var manager = new DataManager())
    {
        var result = manager.Select(request);

        return new JsonCamelCaseResult(new DataGridResponse<Criteria>(result, request),
            JsonRequestBehavior.AllowGet);
    }
}

##License

MIT license - http://www.opensource.org/licenses/mit-license.php

About

Knockout Datatable is a library that can be used just like jQuery DataTables.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published