独角兽企业重金招聘Python工程师标准>>>
1.html
<div class="wrapper wrapper-content animated fadeInRight" ng-controller="inventoryLogCtrl as ctrl"><div class="table-responsive"><table id="so_inventory" datatabledt-options="ctrl.dataTable.dtOptions"dt-columns="ctrl.dataTable.dtColumns"dt-instance="ctrl.dataTable.dtInstance"class="table table-striped table-bordered table-hover dataTables-example darkbg-hover item-search-datatables"dt-disable-deep-watchers="true"><thead><tr><th>订单号</th><th>商品号</th><th>订单类型</th><th>订单时间</th></tr></thead><tbody></tbody></table></div></div>
2.angularJS controller
/*** Created by Scott on /5/17.*//*** @author Scott Huang* @since -05-17*/(function (angular) {'use strict';function inventoryLogCtrl($compile, $scope, $location, $timeout, $filter, inService,getMsg, buildTable, DTColumnBuilder, localStorageService) {var vm = this;vm.data = {searchFilterData: {keyword: "",pageSize: "",startColumn: "",item_number:"",order_number:"",order_type:"",order: {orderColumn: "",orderRule: ""}}};vm.search = function () {$scope.searchLoading = true;$timeout(function () {vm.dataTable.dtInstance.DataTable.draw();$scope.searchLoading = false;}, 1000)};vm.renderWith={setOrderType:function (cellData) {if(cellData!=null){if(cellData=="out"){return "出库";}if(cellData=="in"){return "入库";}else{return "未知";}}},//*******************************************************************// cellData 单元格数据 type标识需不需要隐藏 full 代表全部数据//*******************************************************************setOrderNumberClick:function (cellData, type, full, meta) {if(cellData!=null){if(full.order_type=="in"){return '<a target="_blank" href="../po/index.html#/po/poManagement?actionType=orderEdit&order_number='+cellData+'">'+cellData+'</a>';}if(full.order_type=="out"){return '<a target="_blank" href="../po/index.html#/po/poManagement?actionType=orderDetail&order_number='+cellData+'">'+cellData+'</a>';}}else{return "";}},setItemNumberClick:function (cellData) {if(cellData!=null){return '<a target="_blank" href="../im/index.html#/im/itemEdit?item_number='+cellData+'">'+cellData+'</a>';}else{return "";}},}vm.events = {init: function () {vm.events.bindGrid();vm.events.queryOrderTypeList();},bindGrid: function () {vm.dataTable = buildTable.YMTable(vm.data.searchFilterData, inService, "queryOrderList");vm.dataTable.dtOptions.withButtons([//{// extend: 'copy',// text: 'copy',// exportOptions: {// columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]// }//},//{// extend: 'print',// text: 'print',// exportOptions: {// columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]// }//},//{// extend: 'excel',// text: 'excel',// exportOptions: {// columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]// }//}]).withOption('fnRowCallback', vm.events.rowCallback).withOption('order', [8, 'desc']);vm.dataTable.dtColumns = [DTColumnBuilder.newColumn('order_number').renderWith(vm.renderWith.setOrderNumberClick),DTColumnBuilder.newColumn('item_number').renderWith(vm.renderWith.setItemNumberClick),DTColumnBuilder.newColumn('order_type').renderWith(vm.renderWith.setOrderType),DTColumnBuilder.newColumn('in_dtm').renderWith(setDate),];},rowCallback: function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {$compile(angular.element(nRow).contents())($scope);return nRow;},queryOrderTypeList: function () {inService.queryOrderTypeList().success(function (data) {if (data.messageId == 10000) {vm.data.order_type = data.body;}});},};function setDate(cellData, type, full) {if(undefined != cellData && cellData.toString().length > 10) {return $filter('date')(cellData ? cellData : '', 'yyyy-MM-dd HH:mm:ss');}return $filter('date')(cellData ? cellData * 1000 : '', 'yyyy-MM-dd HH:mm:ss');};vm.events.init();}angular.module('central.in').controller('inventoryLogCtrl', [ '$compile', '$scope', '$location', '$timeout', '$filter', 'inService', 'getMsg', 'buildTable', 'DTColumnBuilder','localStorageService', inventoryLogCtrl]);})(window.angular);
3.angularJs service
/*** INSPINIA - Responsive Admin Theme**/angular.module('central.in').service('inService', ['appContext', 'common', 'localStorageService', function (appContext, common, localStorageService) {this.queryOrderList = function (oData) {return common.baseAjax('http://localhost:8080/queryLogList', 'POST', oData);};this.queryOrderTypeList = function (oData) {return common.baseAjax('http://localhost:8080/queryLogList', 'POST', oData);};}])
4.注意
由于是从文件中截取出相关代码并修改相关变量及方法名,代码中可能存在错误,仅供参考
如果觉得《angularJs + datatable使用示例》对你有帮助，请点赞、收藏，并留下你的观点哦！
