angularJs中datatable实现代码

本文介绍了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); 

 }
 }
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2017-06-01

JS实现点击Radio动态更新table数据

tbody定义一个标签 当上面变化的,在js里面做拼接就行了,拼接结束 tbody.html(XXX) <script type="text/javascript"> $(function(){ var quotas = { 1:{name:"工商银行",oneTime:1000}, 2:{name:"农业银行",oneTime:800}, 3:{name:"中国银行",oneTime:2000}, 4:{name

js操作table元素实现表格行列新增、删除技巧总结

本文实例讲述了js操作table元素实现表格行列新增.删除的方法.分享给大家供大家参考,具体如下: /************ TableTool.js ****************************************************************************************************************** **********************************************************

jquery.tableSort.js表格排序插件使用方法详解

本文实例为大家分享了jquery.tableSort.js表格排序的具体代码,供大家参考,具体内容如下 1.一定要引jQuery包,所有jq插件都是基于jQuery包的 2.如果想指定哪一栏不排序这样写 $("#mytable").tablesorter({headers:{5:{sorter:false}}}); 第5列的sorter为false就OK了 参考:http://www.jb51.net/article/105217.htm <!DOCTYPE html> &

JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题

正文 前言:一年前,博主分享过一篇关于bootstrapTable组件冻结列的解决方案  JS组件系列--Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案 ,通过该篇,确实可以实现bootstrapTable的冻结列效果,并且可以兼容ie浏览器.这一年的时间,不断有园友以及群里面的朋友问过我关于固定高度之后,冻结列页面效果不能对齐的问题,奈何博主太忙,一直没有抽空将这个问题优化.最近项目里面也不断有人提过这个bug,这下子不能再推了,必须要直面"惨淡的bug",于

详解PHP中的 input属性(隐藏 只读 限制)

隐藏 <input type="hidden"> 只读 <input type="text" readonly> 失效 <input type="text" disabled> 限制 <input type="text" maxlength="1"> ENTER键让光标移到下一个输入框 <input onkeydown="if(event.ke

详解Python3中的 input() 函数

一.知识介绍: 1.input() 函数,接收任意输入,将所有输入默认为字符串处理,并返回字符串类型: 2.可以用作文本输入,如用户名,密码框的值输入: 3.语法:input("提示信息:") . 二.运用演示: 1.接收任意输入,并返回字符串类型: >>>height = input("输入身高:")          #运行 输入身高: 170                      #输入整数170 >>> type(a)

详解C#中的接口属性以及属性访问器的访问限制

接口属性 可以在接口上声明属性.以下是接口索引器访问器的示例: public interface ISampleInterface { // Property declaration: string Name { get; set; } } 接口属性的访问器不具有体.因此,访问器的用途是指示属性是否为读写.只读或只写. 在此例中,接口 IEmployee 具有读写属性 Name 和只读属性 Counter. Employee 类实现 IEmployee 接口并使用这两种属性.程序读取新雇员的姓名

详解JS中的attribute属性

Attribute是属性的意思,文章仅对部分兼容IE和FF的Attribute相关的介绍. attributes:获取一个属性作为对象getAttribute:获取某一个属性的值 object.getAttributes(attribute) getAttribute方法不属于document对象,所以不能通过document对象获取,只能通过元素节点的调用.例如document.getElementsByTagName("p")[0]. getAttributes("tit

详解python中Numpy的属性与创建矩阵

ndarray.ndim:维度 ndarray.shape:形状 ndarray.size:元素个数 ndarray.dtype:元素数据类型 ndarray.itemsize:字节大小 创建数组: a = np.array([2,23,4]) # list 1d print(a) # [2 23 4] 指定数据类型: a = np.array([2,23,4],dtype=np.int) print(a.dtype) # int 64 dtype可以指定的类型有int32,float,floa

详解Javascript中prototype属性(推荐)

在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不存在类(Class)的概念的,javascript中不是基于'类的',而是通过构造函数(constructor)和原型链(prototype chains)实现的.但是在ES6中提供了更接近传统语言的写法,引入了Class(类)这个概念,作为对象的模板.通过class关键字,可以定义类.基本上,ES6的class可以看作只是一个语法糖,它的绝大部分功能

详解elementUI中input框无法输入的问题

最近发现别人项目中在输入密码的时候发现input框无法输入进去 键盘都快敲坏了还是无法输入 通过各种排查.还是无法解决这个问题 后面无意中发现 elementUI中@input事件可以拿到当前的输入的值 问题找到了 视图没有更新的问题 那么怎么解决了 刷新通过this.$forceUpdate() 可以解决这个问题 这样的话这个问题就解决了 原因可能是由于组件嵌套太深(不是很了解为啥出现这个问题有没有大神解释一波 ) 到此这篇关于详解elementUI中input框无法输入的问题的文章就介绍到这

详解AngularJS中$filter过滤器使用(自定义过滤器)

1.内置过滤器 * $filter 过滤器,是angularJs中用来处理数据以更好的方式展示给我用户.比如格式化日期,转换大小写等等. * 过滤器即有内置过滤器也支持自定义过滤器.内置过滤器很多,可以百度.关键是如何使用: * 1.在HTML中直接使用内置过滤器 * 2.在js代码中使用内置过滤器 * 3.自定义过滤器 * * (1)常用内置过滤器 * number 数字过滤器,可以设置保留数字小数点后几位等 * date 时间格式化过滤器,可自己设置时间格式 * filter 过滤的数据一般

详解BootStrap中Affix控件的使用及保持布局的美观的方法

Affix是BootStrap中的一个很有用的控件,他能够监视浏览器的滚动条的位置并让你的导航始终都在页面的可视区域.一开始的时候,导航在页面中是普通的流式布局,占有文档中固定的位置,当页面滚动的时候,导航就自动变成了固定布局(fixed),始终处于用户的视区,下面来说说他的用法.首先来看看他的实现原理.它是通过实时修改页面元素的class属性来实现的 开始的时候应用affix的元素的class中会自动添加affxi-top属性 当滚动条滚动以至于导航快要到页面顶部的时候这时候在元素的class

详解Python3 中hasattr()、getattr()、setattr()、delattr()函数及示例代码数

hasattr()函数 hasattr()函数用于判断是否包含对应的属性 语法: hasattr(object,name) 参数: object--对象 name--字符串,属性名 返回值: 如果对象有该属性返回True,否则返回False 示例: class People: country='China' def __init__(self,name): self.name=name def people_info(self): print('%s is xxx' %(self.name))