本文介绍了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:;" rel="external nofollow" >阿司法所</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.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: '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中的路由使用及实现代码,包括了AngularJS中的路由使用及实现代码的使用技巧和注意事项,需要的朋友参考一下 前 言 本章节将为大家介绍 AngularJS 路由。AngularJS 路由允许我们通过不同的 URL 访问不同的内容。通过 AngularJS 可以实现多视图的单页Web应用(single page web application,SPA)。 1.1
本文向大家介绍angularjs+bootstrap实现自定义分页的实例代码,包括了angularjs+bootstrap实现自定义分页的实例代码的使用技巧和注意事项,需要的朋友参考一下 目前在做一个java web页面,没有使用到框架的分页,所以需要自己实现分页,就想到了用angularjs来实现分页,数据通过ajax从后台获取。 插件 百度了一下,看到一个比较漂亮的插件,就直接用该插件,并修改
本文向大家介绍AngularJS 打开新的标签页实现代码,包括了AngularJS 打开新的标签页实现代码的使用技巧和注意事项,需要的朋友参考一下 废话不多说了,直接给大家贴代码了,具体代码如下所示: 总结 以上所述是小编给大家介绍的AngularJS 打开新的标签页实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对呐喊教程网站的支持!
本文向大家介绍Angularjs 实现分页功能及示例代码,包括了Angularjs 实现分页功能及示例代码的使用技巧和注意事项,需要的朋友参考一下 基于Angularjs实现分页 前言 学习任何一门语言前肯定是有业务需求来驱动你去学习它,当然ng也不例外,在学习ng前我第一个想做的demo就是基于ng实现分页,除去基本的计算思路外就是使用指令封装成一个插件,在需要分页的列表页面内直接
本文向大家介绍Angularjs实现下拉框联动的示例代码,包括了Angularjs实现下拉框联动的示例代码的使用技巧和注意事项,需要的朋友参考一下 第一种联动方式,在网上看到的,感觉对于我的使用性不高,比较后端不会提供这种json。。。 实现截图 html js 第二种联动方式,这次是根据后台要求,自己写的一个联动,当然没有请求接口,就是单独写个固定值 1.联动的思路 1.首先是选择总类别 2.总
JSF为开发人员提供了强大的功能来定义他们自己的自定义组件,可用于呈现自定义内容。 定义自定义组件 在JSF中定义自定义组件的过程分为两步。 步 描述 1a 创建资源文件夹。 使用复合命名空间在resources文件夹中创建xhtml文件。 1b 使用复合标签composite:interface, composite:attribute和composite:implementation,来定义复