关于angularjs dataTables 怎么传参

2025-02-15 10:07:12

推荐回答（1个）

回答1：

一般都是页面布局：上面几个查询条件，有个【查询】按钮，然后下面是个grid
关于dataTables 怎么接收参数，调用ajax，然后把结果显示出来。
我就卡在传参数这块。
一般的ajax

var example_table = $('#example_table').DataTable({
'ajax': {
"type" : "POST",
"url" : '/path/to/your/URL',
"data" : function( d ) {
d.example_key1= $('#example_input1').val();
d.example_key2= $('#example_input2').val();
d.example_key3= $('#example_input3').val();
},
"dataSrc": ""
},
'columns': [
{"data" : "metric_name"},
{"data" : "metric_type"},
{"data" : "metric_timestamp"},
{"data" : "metric_duration"}
]
});
//To Reload The Ajax
//See DataTables.net for more information about the reload method
example_table.ajax.reload()

As you can see, you simply can see any property of the parameter “d” and set a value. DataTables when then set the “data” object to those properites.

For example, if the values of example_input1, example_input2, or example_input3 change, simply reload the ajax method of DataTables by using :

example_table.ajax.reload()

目前是angularjs，封装成了directive
代码如下：
'use strict';

/** zhang 这个是从ui-utils.js 里面copy的，不是我copy的，是别人copy的
* 0.1.1
* General-purpose jQuery wrapper. Simply pass the plugin name as the expression.
*
* It is possible to specify a default set of parameters for each jQuery plugin.
* Under the jq key, namespace each plugin by that which will be passed to ui-jq.
* Unfortunately, at this time you can only pre-define the first parameter.
* @example { jq : { datepicker : { showOn:'click' } } }
*
* @param ui-jq {string} The $elm.[pluginName]() to call.
* @param [ui-options] {mixed} Expression to be evaluated and passed as options to the function
* Multiple parameters can be separated by commas
* @param [ui-refresh] {expression} Watch expression and refire plugin on changes
*
* @example
*/
angular.module('ui.jq', ['ui.load']).
value('uiJqConfig', {}).
directive('uiJq', ['uiJqConfig', 'JQ_CONFIG', 'uiLoad', '$timeout', function uiJqInjectingFunction(uiJqConfig, JQ_CONFIG, uiLoad, $timeout) {

return {
restrict: 'A',
compile: function uiJqCompilingFunction(tElm, tAttrs) {

if (!angular.isFunction(tElm[tAttrs.uiJq]) && !JQ_CONFIG[tAttrs.uiJq]) {
throw new Error('ui-jq: The "' + tAttrs.uiJq + '" function does not exist');
}
var options = uiJqConfig && uiJqConfig[tAttrs.uiJq];

return function uiJqLinkingFunction(scope, elm, attrs) {

function getOptions(){
var linkOptions = [];

// If ui-options are passed, merge (or override) them onto global defaults and pass to the jQuery method
if (attrs.uiOptions) {
linkOptions = scope.$eval('[' + attrs.uiOptions + ']');
if (angular.isObject(options) && angular.isObject(linkOptions[0])) {
linkOptions[0] = angular.extend({}, options, linkOptions[0]);
}
} else if (options) {
linkOptions = [options];
}
return linkOptions;
}

// If change compatibility is enabled, the form input's "change" event will trigger an "input" event
if (attrs.ngModel && elm.is('select,input,textarea')) {
elm.bind('change', function() {
elm.trigger('input');
});
}

// Call jQuery method and pass relevant options
function callPlugin() {
$timeout(function() {
elm[attrs.uiJq].apply(elm, getOptions());
}, 0, false);
}

function refresh(){
// If ui-refresh is used, re-fire the the method upon every change
if (attrs.uiRefresh) {
scope.$watch(attrs.uiRefresh, function() {
callPlugin();
});
}
}

if ( JQ_CONFIG[attrs.uiJq] ) {
uiLoad.load(JQ_CONFIG[attrs.uiJq]).then(function() {
callPlugin();
refresh();
}).catch(function() {

});
} else {
callPlugin();
refresh();
}
};
}
};
}]);

最新问答

阜新7天气预报今天_明后天_7天_15天天气预报

我用的WIN7 32位旗舰版，资源管理器一直重启，就给重装了系统，装完以后玩游戏就一闪一闪的

如果我写一个小说继承和延续了其他小说的情节,但主体上不一样，是不是侵权。

刷机精灵好用吗？刷机精灵可以刷小米 M2 手机吗？

生化危机3里面的追击者是安布雷拉的兵器为什么还会攻击公司的直升机？它不是由电脑控制的吗？也就是由人

茅台酒在1915年巴拿马万国博览会获金奖了吗