angularjs ajax datatable,angularJs中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,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,mRender: colattr.mrender

});

}

});

// Load the datatable!

$elem.dataTable(options);

//console.log(options);

}

}

});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

总结

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。

相关文章

猜你在找的JavaScript相关文章

js的报错有时候会让人很难以琢磨尝试给不能赋值的东西赋值，引起这个错误 if(doSomething() = 'somevalue')此例中，程序员意外地使用了单个等号，而不是双等号。“left-hand side in assignment” 提及了等号左手边的部分，因此你可以看到以上例子，左手边包含不能赋值的东西，导致这个错误。如何修复错误：确保没有给函数结果赋值，或者...

author：咔咔wechat：fangkangfk需求：点击这几个按钮，一个按钮可以控制显示和隐藏对应的input框使用toggle即可

author：咔咔wechat：fangkangfk方法： function formatDate(now) { var year = now.getFullYear(), month = now.getMonth() + 1, date = now.getDate(), hour = now.getHours(), minute ...

author：咔咔wechat：fangkangfk这里放一个组装数据的案例，不会的可以参考一下$.ajax({ type:"post", url:"{url(Banner/index)}",//对应controller的URL async:false, dataType: 'jso...

author：咔咔wechat：fangkangfk

author：咔咔wechat：fangkangfk案例：获取方式：测试：

author：咔咔wechat：fangkangfk  layui.use(['jquery',], function(args){ var $= layui.jquery; $('.type').click(function () { $(this).addClass('checked').siblings().rem...

获取时间：1var myDate = new Date();//获取系统当前时间获取特定格式的时间： 1 myDate.getYear(); //获取当前年份(2位) 2 myDate.getFullYear(); //获取完整的年份(4位,1970-????) 3 myDate.getMonth(); //获取当前月份(0-11,...