angularJs中datatable实现

html引用derective:
<table datatable dtOptions="dtOptionsExample2" class="table table-striped m-b-none"></table>
controller设置：

$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 ‘<a class="emplyeeInfoLink" href="javascript:;">阿司法所</a>‘;
}
},
{ "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.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: ‘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);

    }
  }
});

angularJs中datatable实现,古老的榕树,5-wow.com