无法将 vedmack/yadcf 插件与 tigrang/cakephp-datatable 一起使用
Unable to use vedmack/yadcf plugin with tigrang/cakephp-datatable
我在我的一个 cakePHP 2.6 项目(和 DT 1.10.6)中使用 tigrang/cakephp-datatable。到目前为止,我已经能够在插件作者的帮助下成功实现插件。这个插件很棒,我想保留它。
现在,我正在尝试使用 vedmack/YADCF 插件和我现有的数据 table 来实现(尤其是)列过滤功能,因为我发现官方 DT 上的示例非常混乱并且有限的。我在初始化 YADCF 时不断出错:
TypeError: oTable.settings is not a function
var instance = oTable.settings()[0].oInstance,
有没有办法让这两个插件一起工作?有人试过吗?
下面是我使用 cakephp-data 的 DT JStable:
$('.dataTable').each(function() {
var table = $(this);
var model = table.attr('data-config');
var settings = dataTableSettings[model];
settings['dom'] = 'lrtip';
settings['stateSave'] = true;
settings['stateSaveCallback'] = function (settings, data) {
$.ajax( {...});
};
settings['stateLoadCallback'] = function (settings) {
...
};
table.dataTable(settings);
});
在上面的代码之后,我尝试了类似的方法和其他一些尝试来让 YADCF 工作,但我总是遇到同样的错误:
var table = $('.dataTable');
yadcf.init(table, [
{column_number: 0, filter_type: "text", filter_reset_button_text: false, filter_delay:500},
...,
{column_number: 4, filter_type: "select", filter_default_label: "Select", filter_reset_button_text: false, filter_delay:500},
{column_number: 5, filter_type: "range_number", filter_reset_button_text: false, filter_delay:500},
...,
]);
我已经在没有其他插件的情况下尝试了这个 YADCF 代码,它工作得很好。所以,我需要帮助修改代码以与其他插件一起实现。
我也试过这个(因为 DT 是使用 dataTable()
小写 "d" 初始化的)但是没有用:
$('.dataTable').each(function() {
...
...
table.dataTable(settings)
.yadcf([
{column_number: 0, ...},
...
]);
});
PS: 我也问过第一个插件的问题 github 但我希望 yadcf 的作者或有经验的人能帮助我这里。
尝试以下操作(删除了循环/this
用法)
var table;
var model = table.attr('data-config');
var settings = dataTableSettings[model];
settings['dom'] = 'lrtip';
settings['stateSave'] = true;
settings['stateSaveCallback'] = function (settings, data) {
// Send an Ajax request to the server with the state object
$.ajax( {
"url": "/cake/Users/save_state",
"data": data,
"dataType": "json",
"type": "POST",
"success": function () {
console.log("ca");
},
});
};
settings['stateLoadCallback'] = function (settings) {
var o;
// Send an Ajax request to the server to get the data. Note that
// this is a synchronous request since the data is expected back from the
// function
$.ajax( {
"url": "/cake/Users/get_state",
"async": false,
"dataType": "json",
"success": function (json) {
o = json;
},
});
return o;
};
table = $('.dataTable').DataTable(settings);
yadcf.init(table, [
{column_number: 0, filter_type: "text", filter_reset_button_text: false, filter_delay:500},
{column_number: 1, filter_type: "text", filter_reset_button_text: false, filter_delay:500},
{column_number: 2, filter_type: "text", filter_reset_button_text: false, filter_delay:500},
{column_number: 3, filter_type: "text", filter_reset_button_text: false, filter_delay:500},
{column_number: 4, filter_type: "select", filter_default_label: "Select", filter_reset_button_text: false, filter_delay:500},
{column_number: 5, filter_type: "range_number", filter_reset_button_text: false, filter_delay:500},
{column_number: 6, filter_type: "select", filter_default_label: "Select", filter_reset_button_text: false, filter_delay:500},
]);
或者您可以将您当前的代码修改为
$('.dataTable').DataTable(settings);
--> return $('.dataTable').DataTable(settings);
dtable('.dataTable');
--> var oTable = dtable('.dataTable');
我在我的一个 cakePHP 2.6 项目(和 DT 1.10.6)中使用 tigrang/cakephp-datatable。到目前为止,我已经能够在插件作者的帮助下成功实现插件。这个插件很棒,我想保留它。
现在,我正在尝试使用 vedmack/YADCF 插件和我现有的数据 table 来实现(尤其是)列过滤功能,因为我发现官方 DT 上的示例非常混乱并且有限的。我在初始化 YADCF 时不断出错:
TypeError: oTable.settings is not a function
var instance = oTable.settings()[0].oInstance,
有没有办法让这两个插件一起工作?有人试过吗?
下面是我使用 cakephp-data 的 DT JStable:
$('.dataTable').each(function() {
var table = $(this);
var model = table.attr('data-config');
var settings = dataTableSettings[model];
settings['dom'] = 'lrtip';
settings['stateSave'] = true;
settings['stateSaveCallback'] = function (settings, data) {
$.ajax( {...});
};
settings['stateLoadCallback'] = function (settings) {
...
};
table.dataTable(settings);
});
在上面的代码之后,我尝试了类似的方法和其他一些尝试来让 YADCF 工作,但我总是遇到同样的错误:
var table = $('.dataTable');
yadcf.init(table, [
{column_number: 0, filter_type: "text", filter_reset_button_text: false, filter_delay:500},
...,
{column_number: 4, filter_type: "select", filter_default_label: "Select", filter_reset_button_text: false, filter_delay:500},
{column_number: 5, filter_type: "range_number", filter_reset_button_text: false, filter_delay:500},
...,
]);
我已经在没有其他插件的情况下尝试了这个 YADCF 代码,它工作得很好。所以,我需要帮助修改代码以与其他插件一起实现。
我也试过这个(因为 DT 是使用 dataTable()
小写 "d" 初始化的)但是没有用:
$('.dataTable').each(function() {
...
...
table.dataTable(settings)
.yadcf([
{column_number: 0, ...},
...
]);
});
PS: 我也问过第一个插件的问题 github 但我希望 yadcf 的作者或有经验的人能帮助我这里。
尝试以下操作(删除了循环/this
用法)
var table;
var model = table.attr('data-config');
var settings = dataTableSettings[model];
settings['dom'] = 'lrtip';
settings['stateSave'] = true;
settings['stateSaveCallback'] = function (settings, data) {
// Send an Ajax request to the server with the state object
$.ajax( {
"url": "/cake/Users/save_state",
"data": data,
"dataType": "json",
"type": "POST",
"success": function () {
console.log("ca");
},
});
};
settings['stateLoadCallback'] = function (settings) {
var o;
// Send an Ajax request to the server to get the data. Note that
// this is a synchronous request since the data is expected back from the
// function
$.ajax( {
"url": "/cake/Users/get_state",
"async": false,
"dataType": "json",
"success": function (json) {
o = json;
},
});
return o;
};
table = $('.dataTable').DataTable(settings);
yadcf.init(table, [
{column_number: 0, filter_type: "text", filter_reset_button_text: false, filter_delay:500},
{column_number: 1, filter_type: "text", filter_reset_button_text: false, filter_delay:500},
{column_number: 2, filter_type: "text", filter_reset_button_text: false, filter_delay:500},
{column_number: 3, filter_type: "text", filter_reset_button_text: false, filter_delay:500},
{column_number: 4, filter_type: "select", filter_default_label: "Select", filter_reset_button_text: false, filter_delay:500},
{column_number: 5, filter_type: "range_number", filter_reset_button_text: false, filter_delay:500},
{column_number: 6, filter_type: "select", filter_default_label: "Select", filter_reset_button_text: false, filter_delay:500},
]);
或者您可以将您当前的代码修改为
$('.dataTable').DataTable(settings);
--> return $('.dataTable').DataTable(settings);
dtable('.dataTable');
--> var oTable = dtable('.dataTable');