php实现jsdatatable,angularJs中关于datatable的实现代码分享

本篇文章主要介绍了angularJs中datatable实现代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

本文介绍了angularJs中datatable实现，有需要的小伙伴可以参考下

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

],

/*"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);

}

}

});