angularjs ajax datatable,angularJs中datatable实现

angularJs中datatable实现

(2014-09-12 13:04:06)

标签：

angularjs

grid

html引用derective:

controller设置：

$scope.dtOptions = {

"bProcessing": true,

"bServerSide": true,

iDisplayLength: 5,

sAjaxSource: 'http://10.188.192.200:8080/employee/page?deptId='+ data,

sAjaxDataProp: 'aaData',

"sDom": "r>t>",

sPaginationType: "full_numbers",

"aoColumns":

[

{ "mData": "employeeId" },

{ "mData": "employeeName",

"sClass": "center",

"mRender": function(data,type,full) {

return '阿司法所';

}

},

{ "mData": "employeeEmail" },

{ "mData": "employeeMobilePhoneMaster" }

],

"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); } } });

分享：

喜欢

0

赠金笔

加载中，请稍候......

评论加载中，请稍候...

发评论

登录名： 密码： 找回密码 注册记住登录状态

昵   称：

评论并转载此博文

发评论

以上网友发言只代表其个人观点，不代表新浪网的观点或立场。