Using Jquery Datatable with AngularJs

Question

I m trying to use the jquery datatable plugin in my angularjs project  but my question is does it support lazy loading of value for angularjs  i want beacuse i have many row  how to use  datatable pipeline with angularjs   There is a solution for pagination in here  How to use the solution with angularjs

User · Answer

visit this link for reference http   codepen io kalaiselvan pen RRBzda   lt script gt    var app angular module  formvalid     ui bootstrap   ui utils     app controller  validationCtrl  function  scope      scope data                          Tiger Nixon                System Architect                Edinburgh                5421                2011  04  25                 320 800                                    Garrett Winters                Accountant                Tokyo                8422                2011  07  25                 170 750                                    Ashton Cox                Junior Technical Author                San Francisco                1562                2009  01  12                 86 000                                    Cedric Kelly                Senior Javascript Developer                Edinburgh                6224                2012  03  29                 433 060                                    Airi Satou                Accountant                Tokyo                5407                2008  11  28                 162 700                                    Brielle Williamson                Integration Specialist                New York                4804                2012  12  02                 372 000                                    Herrod Chandler                Sales Assistant                San Francisco                9608                2012  08  06                 137 500                                    Rhona Davidson                Integration Specialist                Tokyo                6200                2010  10  14                 327 900                                    Colleen Hurst                Javascript Developer                San Francisco                2360                2009  09  15                 205 500                                    Sonya Frost                Software Engineer                Edinburgh                1667                2008  12  13                 103 600                                    Jena Gaines                Office Manager                London                3814                2008  12  19                 90 560                                    Quinn Flynn                Support Lead                Edinburgh                9497                2013  03  03                 342 000                                    Charde Marshall                Regional Director                San Francisco                6741                2008  10  16                 470 600                                    Haley Kennedy                Senior Marketing Designer                London                3597                2012  12  18                 313 500                                    Tatyana Fitzpatrick                Regional Director                London                1965                2010  03  17                 385 750                                    Michael Silva                Marketing Designer                London                1581                2012  11  27                 198 500                                    Paul Byrd                Chief Financial Officer  CFO                 New York                3059                2010  06  09                 725 000                                    Gloria Little                Systems Administrator                New York                1721                2009  04  10                 237 500                                    Bradley Greer                Software Engineer                London                2558                2012  10  13                 132 000                                    Dai Rios                Personnel Lead                Edinburgh                2290                2012  09  26                 217 500                                    Jenette Caldwell                Development Lead                New York                1937                2011  09  03                 345 000                                    Yuri Berry                Chief Marketing Officer  CMO                 New York                6154                2009  06  25                 675 000                                    Caesar Vance                Pre-Sales Support                New York                8330                2011  12  12                 106 450                                    Doris Wilder                Sales Assistant                Sidney                3023                2010  09  20                 85 600                                    Angelica Ramos                Chief Executive Officer  CEO                 London                5797                2009  10  09                 1 200 000                                    Gavin Joyce                Developer                Edinburgh                8822                2010  12  22                 92 575                                    Jennifer Chang                Regional Director                Singapore                9239                2010  11  14                 357 650                                    Brenden Wagner                Software Engineer                San Francisco                1314                2011  06  07                 206 850                                    Fiona Green                Chief Operating Officer  COO                 San Francisco                2947                2010  03  11                 850 000                                    Shou Itou                Regional Marketing                Tokyo                8899                2011  08  14                 163 000                                    Michelle House                Integration Specialist                Sidney                2769                2011  06  02                 95 400                                    Suki Burks                Developer                London                6832                2009  10  22                 114 500                                    Prescott Bartlett                Technical Author                London                3606                2011  05  07                 145 000                                    Gavin Cortez                Team Leader                San Francisco                2860                2008  10  26                 235 500                                    Martena Mccray                Post-Sales support                Edinburgh                8240                2011  03  09                 324 050                                    Unity Butler                Marketing Designer                San Francisco                5384                2009  12  09                 85 675                                    Howard Hatfield                Office Manager                San Francisco                7031                2008  12  16                 164 500                                    Hope Fuentes                Secretary                San Francisco                6318                2010  02  12                 109 850                                    Vivian Harrell                Financial Controller                San Francisco                9422                2009  02  14                 452 500                                    Timothy Mooney                Office Manager                London                7580                2008  12  11                 136 200                                    Jackson Bradshaw                Director                New York                1042                2008  09  26                 645 750                                    Olivia Liang                Support Engineer                Singapore                2120                2011  02  03                 234 500                                    Bruno Nash                Software Engineer                London                6222                2011  05  03                 163 500                                    Sakura Yamamoto                Support Engineer                Tokyo                9383                2009  08  19                 139 575                                    Thor Walton                Developer                New York                8327                2013  08  11                 98 540                                    Finn Camacho                Support Engineer                San Francisco                2927                2009  07  07                 87 500                                    Serge Baldwin                Data Coordinator                Singapore                8352                2012  04  09                 138 575                                    Zenaida Frank                Software Engineer                New York                7439                2010  01  04                 125 250                                    Zorita Serrano                Software Engineer                San Francisco                4389                2012  06  01                 115 000                                    Jennifer Acosta                Junior Javascript Developer                Edinburgh                3431                2013  02  01                 75 650                                    Cara Stevens                Sales Assistant                New York                3990                2011  12  06                 145 600                                    Hermione Butler                Regional Director                London                1016                2011  03  21                 356 250                                    Lael Greer                Systems Administrator                London                6733                2009  02  27                 103 500                                    Jonas Alexander                Developer                San Francisco                8196                2010  07  14                 86 500                                    Shad Decker                Regional Director                Edinburgh                6373                2008  11  13                 183 000                                    Michael Bruce                Javascript Developer                Singapore                5384                2011  06  27                 183 000                                    Donna Snider                Customer Support                New York                4226                2011  01  25                 112 000                     scope dataTableOpt         if any ajax call            lt  script gt   lt div class  container  ng-app  formvalid  gt         lt div class  panel  data-ng-controller  validationCtrl  gt         lt div class  panel-heading border  gt               lt h2 gt Data table using jquery datatable in Angularjs  lt  h2 gt         lt  div gt         lt div class  panel-body  gt             lt table class  table table-bordered bordered table-striped table-condensed datatable  ui-jq  dataTable  ui-options  dataTableOpt  gt             lt thead gt               lt tr gt                 lt th gt   lt  th gt                 lt th gt Name lt  th gt                 lt th gt Position lt  th gt                 lt th gt Office lt  th gt                 lt th gt Age lt  th gt                 lt th gt Start Date lt  th gt               lt  tr gt             lt  thead gt               lt tbody gt                 lt tr ng-repeat  n in data  gt                   lt td gt    index 1   lt  td gt                   lt td gt   n 0    lt  td gt                   lt td gt   n 1    lt  td gt                   lt td gt   n 2    lt  td gt                   lt td gt   n 3    lt  td gt                   lt td gt   n 4    date  dd MM yyyy    lt  td gt                 lt  tr gt               lt  tbody gt           lt  table gt         lt  div gt       lt  div gt       lt  div gt

User · Answer

I know it s tempting to use drag and drop angular modules created by other devs - but actually  unless you are doing something non-standard like dynamically adding   removing rows from the ng-repeated data set by calling  http services chance are you really don t need a directive based solution  so if you do go this direction you probably just created extra watchers you don t actually need   What this implementation provides    Pagination is always correct Filtering is always correct  even if you add custom filters but of course they just need to be in the same closure    The implementation is easy  Just use angular s version of jQuery dom ready from your view s controller   Inside your controller    use strict    var yourApp   angular module  yourApp yourController controller         yourApp controller  yourController      scope     http     q     timeout   function   scope   http   q   timeout          scope users                           email   email address com               name                    first   User                   last   Last Name                             phone    416  555-5555               permissions   Admin                                   email   example email com               name                    first   First                   last   Last                             phone    514  222-1111               permissions   User                        angular element document  ready  function               dTable       user table            dTable DataTable                     Now in your html view can do    lt div class  table table-data clear-both  data-ng-show  viewState     possibleStates 0   gt           lt table id  user table  class  users list dtable  gt               lt thead gt                   lt tr gt                       lt th gt E-mail lt  th gt                       lt th gt First Name lt  th gt                       lt th gt Last Name lt  th gt                       lt th gt Phone lt  th gt                       lt th gt Permissions lt  th gt                       lt th class  blank-cell  gt  lt  th gt                   lt  tr gt               lt  thead gt               lt tbody gt                   lt tr data-ng-repeat  user in users track by  index  gt                       lt td gt    user email    lt  td gt                       lt td gt    user name first    lt  td gt                       lt td gt    user name last    lt  td gt                       lt td gt    user phone    lt  td gt                       lt td gt    user permissions    lt  td gt                       lt td class  users controls blank-cell  gt                           lt a class  btn pointer  data-ng-click  showEditUser   index    gt Edit lt  a gt                       lt  td gt                   lt  tr gt               lt  tbody gt           lt  table gt       lt  div gt

User · Answer

Take a look at this  AngularJS JQuery datatable   FULL code  http   jsfiddle net zdam 7kLFU   JQuery Datatables s Documentation  http   www datatables net   var dialogApp   angular module  tableExample             dialogApp directive  myTable   function             return function scope  element  attrs                    apply DataTable options  use defaults if none specified by user             var options                   if  attrs myTable length  gt  0                    options   scope  eval attrs myTable                 else                   options                          bStateSave   true                       iCookieDuration   2419200     1 month                         bJQueryUI   true                       bPaginate   false                       bLengthChange   false                       bFilter   false                       bInfo   false                       bDestroy   true                                                  Tell the dataTables plugin what columns to use                We can either derive them from the dom  or use setup from the controller                        var explicitColumns                   element find  th   each function index  elem                    explicitColumns push   elem  text                                 if  explicitColumns length  gt  0                    options  aoColumns     explicitColumns                else if  attrs aoColumns                    options  aoColumns     scope  eval attrs aoColumns                                 aoColumnDefs is dataTables way of providing fine control over column config             if  attrs aoColumnDefs                    options  aoColumnDefs     scope  eval attrs aoColumnDefs                              if  attrs fnRowCallback                    options  fnRowCallback     scope  eval attrs fnRowCallback                                 apply the plugin             var dataTable   element dataTable options                     watch for any changes to our data  rebuild the DataTable             scope  watch attrs aaData  function value                    var val   value    null                  if  val                        dataTable fnClearTable                        dataTable fnAddData scope  eval attrs aaData                                                          function Ctrl  scope          scope message                             scope myCallback   function nRow  aData  iDisplayIndex  iDisplayIndexFull                               td eq 2    nRow  bind  click   function                      scope  apply function                          scope someClickHandler aData                                                   return nRow                       scope someClickHandler   function info                 scope message    clicked     info price                       scope columnDefs                     mDataProp    category    aTargets   0                   mDataProp    name    aTargets   1                    mDataProp    price    aTargets   2                          scope overrideOptions                  bStateSave   true               iCookieDuration   2419200     1 month                 bJQueryUI   true               bPaginate   true               bLengthChange   false               bFilter   true               bInfo   true               bDestroy   true                       scope sampleProductCategories                                       name    1948 Porsche 356-A Roadster                    price   53 9                     category    Classic Cars                      action   x                                                    name    1948 Porsche Type 356 Roadster                    price   62 16               category    Classic Cars                      action   x                                                    name    1949 Jaguar XK 120                    price   47 25               category    Classic Cars                      action   x                                                                   name    1936 Harley Davidson El Knucklehead                    price   24 23               category    Motorcycles                      action   x                                                    name    1957 Vespa GS150                    price   32 95               category    Motorcycles                      action   x                                                    name    1960 BSA Gold Star DBD34                    price   37 32               category    Motorcycles                      action   x                                                                name    1900s Vintage Bi-Plane                    price   34 25               category    Planes                      action   x                                                    name    1900s Vintage Tri-Plane                    price   36 23               category    Planes                      action   x                                                    name    1928 British Royal Navy Airplane                    price   66 74               category    Planes                      action   x                                                    name    1980s Black Hawk Helicopter                    price   77 27               category    Planes                      action   x                                                    name    ATA  B757-300                    price   59 33               category    Planes                      action   x

User · Answer

After many hours of experimenting with using jQueryDataTables with Angular  I found what I needed was available with a native Angular directive called ng-table  It provides sorting  pagination  and ajax reloads  sort of lazy loading capable with a few tweaks

User · Answer

For AngularJs you have to use  angular-datatables min js  file for datatable settings  You will get this from http   l-lin github io angular-datatables   welcome   After that you can write code like below    lt script gt       var app   angular module  AngularWayApp     datatables      lt  script gt    lt div ng-app  AngularWayApp  ng-controller  AngularWayCtrl  gt     lt table id  example  datatable  ng  class  table  gt                                       lt thead gt                                           lt tr gt                                               lt th gt  lt b gt UserID lt  b gt  lt  th gt                                               lt th gt  lt b gt Firstname lt  b gt  lt  th gt                                               lt th gt  lt b gt Lastname lt  b gt  lt  th gt                                               lt th gt  lt b gt Email lt  b gt  lt  th gt                                               lt th gt  lt b gt Actions lt  b gt  lt  th gt                                           lt  tr gt                                       lt  thead gt                                       lt tbody gt                                           lt tr ng-repeat  user in users  ng-click  testingClick user   gt                                               lt td gt                                                    user UserId                                                lt  td gt                                               lt td gt                                                    user FirstName                                                lt  td gt                                               lt td gt                                                    user Lastname                                                lt  td gt                                               lt td gt                                                    user Email                                                lt  td gt                                               lt td gt                                                   lt span ng-click  editUser user   style  color blue cursor  pointer  font-weight 500  font-size 15px  class  btnAdd  data-toggle  modal  data-target   myModal  gt Edit lt  span gt   amp nbsp  amp nbsp     amp nbsp  amp nbsp                                                   lt span ng-click  deleteUser user   style  color red  cursor  pointer  font-weight 500  font-size 15px  class  btnRed  gt Delete lt  span gt                                               lt  td gt                                           lt  tr gt                                       lt  tbody gt                                   lt  table gt                                   lt  div gt

User · Answer

Adding a new answer just as a reference for future researchers and as nobody mentioned that yet I think it s valid   Another good option is ng-grid http   angular-ui github io ng-grid     And there s a beta version  http   ui-grid info   available already with some improvements    Native AngularJS implementation  no jQuery Performs well with large data sets  even 10 000  rows Plugin architecture allows you to use only the features you need   UPDATE   It seems UI GRID is not beta anymore      With the 3 0 release  the repository has been renamed from  ng-grid    to  ui-grid

[javascript] Using Jquery Datatable with AngularJs

Examples related to javascript

Examples related to jquery

Examples related to angularjs

Examples related to jquery-datatables