数据表 - statesavecallback和其他功能在点击时消失 [英] Datatables - statesavecallback and other function sactivate on click

问题描述

如何实现stateSaveCallback /colReorder/buttons：当用户点击按钮时启用['colvis']？



基本上，我需要用户只有在单击编辑按钮时才能编辑数据表，并且当他按下保存按钮时要保存更改...如果用户没有按下保存按钮，则不会保存更改并且如果他没有点击编辑按钮，他将无法进行任何更改...任何想法如何做到这一点？



目前我有以下代码为我的dataTable。



我尝试过：

How can I implement stateSaveCallback / "colReorder" / "buttons": ['colvis'] to be enable when the user clicks on a button?

Basically, I need the user to be able to edit the datatable only when he clicks an edit button and the changes to be saved when he press the save button... if the user doesn't press the save button no change will be saved and if he doesn't click on the edit button he won't be able to make any changes... any ideas how to do this?

Currently I have the code below for my dataTable.

What I have tried:

 <pre lang="Javascript">$('#resultsTable').DataTable({
    			"stateSave": true,
    
    			// "serverSide": true,
    			//rows per page
    			"lengthMenu": [
    				[25, 50, 100, 150, 200, 250, -1],
    				[25, 50, 100, 150, 200, 250, "All"]
    			],
    			"dom": '<"top"Bfi>rt<"bottom"lp><"clear">', //show entries on bottom
    			//Scrolling table
    			"scrollY": 600, //Constrain the DataTable to the given height
    			"deferRender": true, //Elements will be created only when the are required
    			"scroller": true, //Enable vertical scrolling in DataTables.
    			"scrollX": true, //scroll horizontal 
    			"colReorder": true, // column reordering
    			"buttons": ['colvis'], //enable column visibility button
    			//Grouping table 
    			"columnDefs": [{ "visible": false, "targets": 0 }], //mades target column hidden //if commented ---> Uncaught TypeError: Cannot read property 'style' of undefined 
    			"order": [
    				[0, 'asc']
    			], //sorting based on column
    			
    			'stateSaveParams.dt': function(e, settings, data) {
    				data.search.search = "";
    				// table.columns.visible();
    			},
    			//SaveState
    			'stateSaveCallback': function(settings, data) {
    				$.ajax({
    					'url': 'saveDtableState.php',
    					'data': { name: 'resultsTable', 'state': data },
    					'dataType': 'json',
    					'method': 'POST',
    					"success": function() {},
    					error: function(xhr, ajaxOptions, thrownError) {
    						console.log(thrownError);
    					}
    				});
    			},
    			'stateLoadCallback': function(settings, callback) {
    				$.ajax({
    					'url': 'loadDtableState.php',
    					'data': { name: 'resultsTable' },
    					'dataType': 'json',
    					'type': "POST",
    					success: function(data) {
    						callback(data);
    						console.log('test: ' + data);
    
    					},
    					error: function(xhr, ajaxOptions, thrownError) {
    						console.log(thrownError);
    					}
    				});
    			}
    
    		})

will it work if I use this?

    $('#saveEdit').on("click", function(){
    		table.state.save();
    	});

or will it keep saving the state of the table every time I make a change? (I don't want that). and how to implement the other things? ***any tips? ***

推荐答案

（'＃resultsTable'）。DataTable（{
stateSave：true，

//serverSide：true，
//每页行数
lengthMenu：[
[25,50,100,150,200,250，-1 ]，
[25,50,100,150,200,250，全部]
]，
dom：'<topBfi> rt<bottom lp><clear>'，//在底部显示条目
//滚动表
scrollY：600，//将DataTable约束到给定高度
deferRender ：true，//仅在需要时才会创建元素
scroller：true，//在DataTables中启用垂直滚动。
scrollX：true，//滚动水平
colReorder：true，//列重新排序
按钮：['colvis']，//启用列可见性按钮
//分组表
columnDefs：[{可见：false，目标：0}]，//使目标列为hi dden //如果评论--->未捕获的TypeError：无法读取未定义
order的属性'style'：[
[0，'asc']
]，//基于列
$ b $排序b'stateSaveParams.dt'：function（e，settings，data）{
data.search.search =;
// table.columns.visible（）;
}，
// SaveState
'stateSaveCallback'：function（settings，data）{

('#resultsTable').DataTable({ "stateSave": true, // "serverSide": true, //rows per page "lengthMenu": [ [25, 50, 100, 150, 200, 250, -1], [25, 50, 100, 150, 200, 250, "All"] ], "dom": '<"top"Bfi>rt<"bottom"lp><"clear">', //show entries on bottom //Scrolling table "scrollY": 600, //Constrain the DataTable to the given height "deferRender": true, //Elements will be created only when the are required "scroller": true, //Enable vertical scrolling in DataTables. "scrollX": true, //scroll horizontal "colReorder": true, // column reordering "buttons": ['colvis'], //enable column visibility button //Grouping table "columnDefs": [{ "visible": false, "targets": 0 }], //mades target column hidden //if commented ---> Uncaught TypeError: Cannot read property 'style' of undefined "order": [ [0, 'asc'] ], //sorting based on column 'stateSaveParams.dt': function(e, settings, data) { data.search.search = ""; // table.columns.visible(); }, //SaveState 'stateSaveCallback': function(settings, data) {

.ajax（{
'url' ：'saveDtableState.php'，
'data'：{name：'resultsTable'，'state'：data}，
'dataType'：'json'，
'method'：' POST'，
success：function（）{}，
错误：function（xhr，ajaxOptions，thrownError）{
console.log（thrownError）;
}
}）;
}，
'stateLoadCallback'：function（settings，callback）{

.ajax({ 'url': 'saveDtableState.php', 'data': { name: 'resultsTable', 'state': data }, 'dataType': 'json', 'method': 'POST', "success": function() {}, error: function(xhr, ajaxOptions, thrownError) { console.log(thrownError); } }); }, 'stateLoadCallback': function(settings, callback) {

.ajax（{
'url'：'loadDtableState.php'，
'data'：{name：'resultsTable'}，
'dataType'：'json'，
'type'：POST，
成功：函数（数据） {
回调（数据）;
console.log（'test：'+ data）;

}，
错误：function（xhr，ajaxOptions，thrownError） {
console.log（thrownError）;
}
}）;
}

}）

如果我使用它会起作用吗？

.ajax({ 'url': 'loadDtableState.php', 'data': { name: 'resultsTable' }, 'dataType': 'json', 'type': "POST", success: function(data) { callback(data); console.log('test: ' + data); }, error: function(xhr, ajaxOptions, thrownError) { console.log(thrownError); } }); } }) will it work if I use this?

这篇关于数据表 - statesavecallback和其他功能在点击时消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！