這篇文章給大家分享的是有關(guān)angularJs中datatable怎么實(shí)現(xiàn)的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)建站專注于通川網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠為您提供通川營銷型網(wǎng)站建設(shè)，通川網(wǎng)站制作、通川網(wǎng)頁設(shè)計(jì)、通川網(wǎng)站官網(wǎng)定制、微信小程序開發(fā)服務(wù)，打造通川網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供通川網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

html引用derective:

controller設(shè)置：

$scope.dtOptions = { 
"bProcessing": true, 
"bServerSide": true, 
iDisplayLength: 5, 
sAjaxSource: 'http://10.188.192.200:8080/employee/page?deptId='+ data, 
sAjaxDataProp: 'aaData', 
"sDom": "<'row'<'col-sm-6'l><'col-sm-6'f>r>t<'row'<'col-sm-6'i><'col-sm-6'p>>", 
sPaginationType: "full_numbers", 
"aoColumns": 
[ 
{ "mData": "employeeId" }, 
{ "mData": "employeeName", 
"sClass": "center", 
"mRender": function(data,type,full) { 
return '阿司法所'; 
} 
}, 
{ "mData": "employeeEmail" }, 
{ "mData": "employeeMobilePhoneMaster" } 
], 
/*"aoColumnDefs":[ 
{ 
"aTargets":[4], 
"mData": null 
} 
],*/ 
"fnServerData": function( sUrl, aoData, fnCallback, oSettings ) { 
oSettings.jqXHR = $.ajax({ 
"url": sUrl, 
beforeSend: function(xhr) { 
xhr.withCredentials = true; 
}, 
"data": aoData, 
"type": 'get', 
"success": fnCallback, 
"cache": false 
}); 
} 
}

angular.datatable.js:

angular.module('datatablesDirectives', []).directive('datatable', function ($http) { 
 return { 
 // I restricted it to A only. I initially wanted to do something like 
 //   ...   
 // But thead elements are only valid inside table, and  is not a table. 
 // So.. no choice to use  
 restrict: 'A', 
 
 link: function ($scope, $elem, attrs) { 
  var options = {}; 
 
  // Start with the defaults. Change this to your defaults. 
  options = {} 
 
  // If dtOptions is defined in the controller, extend our default option. 
  if (typeof $scope.dtOptions !== 'undefined') { 
 
   angular.extend(options, $scope.dtOptions); 
  } 
 
  // If dtoptions is not declared, check the other options 
  if (attrs['dtoptions'] === undefined) { 
 
   // Get the attributes, put it in an options 
   // We need to do a switch/case because attributes does not retain case 
   // and datatables options are case sensitive. Damn. It's okay! We need to detect 
   // the callbacks anyway and call it as functions, so it works out! 
   // I put what I needed, most of my settings are not dynamics except those 2. 
   for (property in attrs) { 
    switch (property) { 
     // This is the ajax source 
     case 'sajaxsource': 
      options['sAjaxSource'] = attrs[property]; 
     break; 
     // This is the ajax data prop. For example, your result might be 
     // {code: 200, data: [ .. ]} -> in the case, sAjaxDataProp is data 
     case 'sajaxdataprop': 
      options['sAjaxDataProp'] = attrs[property]; 
     break; 
    } 
   } 
  } else { 
   // If dtoptions is declare, extend the current options with it. 
 
   angular.extend(options, $scope.dtOptions); 
  }  
   
  // Just some basic validation. 
  if (typeof options['sAjaxSource'] === 'undefined') { 
 
   throw "Ajax Source not defined! Use sajaxsource='/api/v1/blabla'"; 
  } 
   
  // for Angular http inceptors 
  if (typeof options['fnServerData'] === 'undefined') { 
   options['fnServerData'] = function (sSource, aoData, resultCb) { 
    $http.get(sSource, aoData).then(function (result) { 
     resultCb(result.data); 
    }); 
   }; 
  } 
 
  // Get the column options, put it in a aocolumn object. 
  // Obviously, mdata is the only one required. 
  // I personally just needed those 3, if you need other more feel free to add it. 
  // mData also accepts a function; I'm sure there's a more elegant way but for now 
  // it detects if it's a function, and if it is, do it. 
  options.aoColumns = []; 
 
  // Get the thead rows. 
  $elem.find('thead th').each(function() { 
   var colattr = angular.element(this).data(); 
   //console.log(colattr); 
   //console.log('demodeo'); 
   // Detects if it's a function. Must exist in scope. 
   if (colattr.mdata.indexOf("()") > 1) { 
 
    // Simple one-liner that removes the ending () 
    var fn = $scope[colattr.mdata.substring(0, colattr.mdata.length - 2)]; 
 
    // Throw an error if it's not a function. 
    if (typeof fn === 'function') { 
     options.aoColumns.push({ 
     mData: fn, 
     sClass: colattr.sclass, 
     bVisible: colattr.bvisible, 
     mRender: colattr.mrender 
    });  
 
    } else { 
 
     throw "mData function does not exist in $scope."; 
 
    } 
   } else { 
    //console.log('<1?'); 
    options.aoColumns.push({ 
    mData: colattr.mdata, 
    sClass: colattr.sclass, 
    bVisible: colattr.bvisible, 
    mRender: colattr.mrender 
   }); 
 
   } 
  }); 
 
  // Load the datatable! 
  $elem.dataTable(options); 
  //console.log(options); 
 
 } 
 } 
});

感謝各位的閱讀！關(guān)于“angularJs中datatable怎么實(shí)現(xiàn)”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！