Partage du code d'implémentation de datatable dans angulaireJs

Cet article présente principalement le code d'implémentation datatable dans angularJs L'éditeur pense qu'il est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un œil.

Cet article présente l'implémentation de datatable dans angulaireJs. Les amis dans le besoin peuvent se référer à

htmlCitationderective :

.

Copier le code Le code est le suivant :

<table datatable dtOptions="dtOptionsExample2" class="table table-striped m-b-none"></table>

paramètres du contrôleur :

$scope.dtOptions = { 
"bProcessing": true, 
"bServerSide": true, 
iDisplayLength: 5, 
sAjaxSource: 'http://10.188.192.200:8080/employee/page?deptId='+ data, 
sAjaxDataProp: 'aaData', 
"sDom": "<&#39;row&#39;<&#39;col-sm-6&#39;l><&#39;col-sm-6&#39;f>r>t<&#39;row&#39;<&#39;col-sm-6&#39;i><&#39;col-sm-6&#39;p>>", 
sPaginationType: "full_numbers", 
"aoColumns": 
[ 
{ "mData": "employeeId" }, 
{ "mData": "employeeName", 
"sClass": "center", 
"mRender": function(data,type,full) { 
return &#39;<a class="emplyeeInfoLink" href="javascript:;" rel="external nofollow" >阿司法所</a>&#39;; 
} 
}, 
{ "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": &#39;get&#39;, 
"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 
 // <datatable> <thead> ... </thead> </datatable> 
 // But thead elements are only valid inside table, and <datatable> is not a table. 
 // So.. no choice to use <table datatable> 
 restrict: &#39;A&#39;, 
 
 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 !== &#39;undefined&#39;) { 
 
   angular.extend(options, $scope.dtOptions); 
  } 
 
  // If dtoptions is not declared, check the other options 
  if (attrs[&#39;dtoptions&#39;] === 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&#39;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 &#39;sajaxsource&#39;: 
      options[&#39;sAjaxSource&#39;] = 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 &#39;sajaxdataprop&#39;: 
      options[&#39;sAjaxDataProp&#39;] = 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[&#39;sAjaxSource&#39;] === &#39;undefined&#39;) { 
 
   throw "Ajax Source not defined! Use sajaxsource=&#39;/api/v1/blabla&#39;"; 
  } 
   
  // for Angular http inceptors 
  if (typeof options[&#39;fnServerData&#39;] === &#39;undefined&#39;) { 
   options[&#39;fnServerData&#39;] = 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&#39;m sure there&#39;s a more elegant way but for now 
  // it detects if it&#39;s a function, and if it is, do it. 
  options.aoColumns = []; 
 
  // Get the thead rows. 
  $elem.find(&#39;thead th&#39;).each(function() { 
   var colattr = angular.element(this).data(); 
   //console.log(colattr); 
   //console.log(&#39;demodeo&#39;); 
   // Detects if it&#39;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&#39;s not a function. 
    if (typeof fn === &#39;function&#39;) { 
     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(&#39;<1?&#39;); 
    options.aoColumns.push({ 
    mData: colattr.mdata, 
    sClass: colattr.sclass, 
    bVisible: colattr.bvisible, 
    mRender: colattr.mrender 
   }); 
 
   } 
  }); 
 
  // Load the datatable! 
  $elem.dataTable(options); 
  //console.log(options); 
 
 } 
 } 
});

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!