1.添加一个表格
//主页面表格信息 var initDataTable = function () { $scope.dataTable = $ngDataTables.init({ src: "#dataTable", scope: $scope, selectable: true, searchable: true, pagingType: "full", simplepaging: true, language: { "info": "", "paginate": { "previous": "<", "next": ">", "last": null, "first": null, "page": null, "pageOf": null } }, ordering: false, columns: [ { title: '客户/门店', data: 'CustomerName', render: function (data, type, full, meta) { var info = ""; info = info + full.CustomerName + "<br/>"; info = info + full.CustStoreName; return info; }, filters: { items: [{ title: "客户", field: "CustomerName", op: "cn" }, { title: "门店", field: "CustStoreName", op: "cn" }] } }, { title: '姓名/手机', data: 'UserName', render: function (data, type, full, meta) { var info = ""; info = info + full.UserName + "<br/>"; info = info + full.UserTel; return info; }, filters: { items: [{ title: "姓名", field: "UserName", op: "cn" }, { title: "手机", field: "UserTel", op: "cn" }] } }, { title: "延保卡号", data: "CardNo" }, { title: "延保卡年限", data: "CardYears", render: function (data, type, full, meta) { var info = ""; info = info + full.CardYears + "<br/>"; return info; }, filters: { items: [{ title: "延保卡年限", field: "CardYears", op: "bt" }] } }, { title: '车牌号/车型', data: 'CarBrand', render: function (data, type, full, meta) { var info = ""; info = info + full.CarBrand + "<br/>"; info = info + full.CarModel; return info; }, filters: { items: [{ title: "车牌号", field: "CarBrand", op: "cn" }, { title: "车型", field: "CarModel", op: "cn" }] } }, { title: "VIN码", data: "VinNumber" }, { title: '行车证注册时间', data: 'RegisterTime', dataType: 'date', render: function (data, type, full, meta) { var info = ""; info = info + $filter('date')(full.RegisterTime, 'yyyy-MM-dd') + "<br/>"; return info; }, filters: { items: [{ title: "行车证注册时间", field: "RegisterTime", op: "bt" }] } }, { title: '提交日期', data: 'SubmitTime', dataType: 'date', render: function (data, type, full, meta) { var info = ""; info = info + $filter('date')(full.SubmitTime, 'yyyy-MM-dd') + "<br/>"; return info; }, filters: { items: [{ title: "提交日期", field: "SubmitTime", op: "bt" }] } }, ], getData: function (paging, success) { //var model = { // paging: paging, // qxentity: $rootScope.UserLook //} $apiExtendWarranty.GetWarrantyList(paging, success); }, search: { width: 150, actionTemplate: "#actions" } }); }; initDataTable();
src: "#dataTable",控制HTML中表格的id
对应的HTML
<div class="black_table_responsive scroll_just margin-bottom-15">
<table class="table table-striped table-bordered table-hover" id="dataTable">
<thead>
</thead>
<tbody></tbody>
</table>
<script id="actions" type="text/template">
<div class="btn-group btn-group-xs actions">
<button class="btn spec-lastbtn" data-action="edit">编辑</button>
</div>
</script>
</div>
其中data-action="edit"操作表格中的动作按钮;
2.刷新表格
$scope.dataTable.refresh(true);
3.路径跳转
//编辑 $scope.edit = function (row) { var entity = $scope.dataTable.data[row]; $location.path('/Insurance/Add/' + entity.CarId);
4.获取表格中的单行数据
//编辑 $scope.edit = function (row) { var entity = $scope.dataTable.data[row]; $location.path('/WeChat/Edit/' + entity.Id); }
5.时间格式化
$filter('date')(full.RegisterTime, 'yyyy-MM-dd')