解决JQuery中datatables设置隐藏显示列多次提交后台刷新数据的问题
此次项目开发过程中用到了Jquery的Datatables插件，无疑他是数据列表展示，解决MVC中同步过程中先走控制器后返回视图，查询数据过程中无法提示等待的弊端，
而且他所提供的各种方法也都有较强的实用性。但是再好的程序也会有瑕疵，项目开发中就遇到了其提供的设置隐藏显示列的方法 table.fnSetColumnVis(colShowDic_key[i], true);//colShowDic_key[i]为列的索引。会多次提交刷新数据（有多少列会提交刷新多少次）。
为解决这个问题尝试了很多种方法依然存在各种问题：最终换了个角度思考，既然在列表中更换隐藏显示列不行，为何不重新加载列表呢？
于是datatables中的参数：aoColumns 本身即是一个数组，我们换成了变量，根据设置的隐藏显示列重新定义该数组，然后调用加载列表的方法重新加载列表：
代码如下：
//初始化设置显示列弹出层数据 function instailSetColShow() { var left = document.getElementById("selectBefor"); var right = document.getElementById("selectAfter"); left.options.length = 0; for (i = 0; i < colHiddenDic_key.length; i++) { left.options.add(new Option(colHiddenDic_value[i], colHiddenDic_key[i])); }; right.options.length = 0; for (j = 0; j < colShowDic_key.length; j++) { right.options.add(new Option(colShowDic_value[j], colShowDic_key[j])); }; } //导出选项卡 function selectMove() { var left = document.getElementById("selectBefor"); var right = document.getElementById("selectAfter"); while (true) { var index = left.selectedIndex; if (index < 0) { break; } right.options.add(new Option(left.options[index].text, left.options[index].value)); left.options.remove(index); } } function selectBack() { var left = document.getElementById("selectBefor"); var right = document.getElementById("selectAfter"); while (true) { var index = right.selectedIndex; if (index < 0) { break; } left.options.add(new Option(right.options[index].text, right.options[index].value)); right.options.remove(index); } } //重置显示、隐藏列 function ReSetShowCol() { //获取隐藏显示列 GetHideShowCol(); //获取列表显示列数组 GetAoColumnShow(); //设置列显示 setShowCol(); //关闭弹出层 $("#setModal").modal("hide"); } //获取显示隐藏列 function GetHideShowCol() { var right = document.getElementById("selectAfter"); var left = document.getElementById("selectBefor"); colShowDic_key.length = 0; colShowDic_value.length = 0; colHiddenDic_key.length = 0; colHiddenDic_value.length = 0; //获取显示列 if (right.options.length > 0) { for (i = 0; i < right.options.length; i++) { //获取要添加到数据字典的键值对(显示列) colShowDic_key[i] = right.options[i].value; colShowDic_value[i] = right.options[i].text; } } //获取隐藏列 if (left.options.length > 0) { for (i = 0; i < left.options.length; i++) { //获取要添加到数据字典的键值对(隐藏列) colHiddenDic_key[i] = left.options[i].value; colHiddenDic_value[i] = left.options[i].text; } } } //获取列表显示列数组 function GetAoColumnShow() { aoColumuShow.length = 0; aoColumuShow[0] = { "mData": 'ID', "sTitle": '序号', "sClass": "tdright", "sWidth": "30px", "bSortable": false }; var k = 1; for (var i = 0; i < colShowDic_key.length; i++) { switch (colShowDic_key[i]) { case "1": aoColumuShow[k] = { "mData": "ENTRYNO", "sTitle": "报关单号", "sClass": "taleft", "bSortable": false }; break; case "2": aoColumuShow[k] = { "mData": "DECL_PORT_NAME", "sTitle": "申报地海关", "sClass": "taleft", "bSortable": false }; break; case "3": aoColumuShow[k] = { "mData": "TRADE_MODE", "sTitle": "贸易方式", "sClass": "taleft", "bSortable": false }; break; case "4": aoColumuShow[k] = { "mData": "G_NO", "sTitle": "商品项号", "sClass": "taleft", "bSortable": false }; break; case "5": aoColumuShow[k] = { "mData": "ZM_MODE", "sTitle": "征免方式", "sClass": "taleft", "bSortable": false }; break; case "6": aoColumuShow[k] = { "mData": "RED_GREEN", "sTitle": "红绿通道", "sClass": "taleft", "bSortable": false }; break; case "7": aoColumuShow[k] = { "mData": "AGENT_NAME", "sTitle": "报关单位", "sClass": "taleft", "bSortable": false }; break; case "8": aoColumuShow[k] = { "mData": "OWNER_NAME", "sTitle": "收发货单位", "sClass": "wp10", "bSortable": false }; break; case "9": aoColumuShow[k] = { "mData": "I_E_FLAG", "sTitle": "进出口", "sClass": "taleft", "bSortable": false, "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) { if (oData.I_E_FLAG == "1" || oData.I_E_FLAGI_E_FLAG == "E") { $(nTd).html('进口'); } else { $(nTd).html('出口'); } } }; break; case "10": aoColumuShow[k] = { "mData": "DECL_PORT_CODE", "sTitle": "关区", "sClass": "taleft", "bSortable": false }; break; case "11": aoColumuShow[k] = { "mData": "CUT_MODE", "sTitle": "征免性质", "sClass": "taleft", "bSortable": false }; break; case "12": aoColumuShow[k]={ "mData": "G_NAME", "sTitle": "商品名称", "sClass": "taleft", "bSortable": false }; break; case "13": aoColumuShow[k]={ "mData": "G_MODEL", "sTitle": "规格型号", "sClass": "taleft", "bSortable": false }; break; case "14": aoColumuShow[k] = { "mData": "RELEASE_DATE", "sTitle": "放行日期", "sClass": "wp10", "bSortable": false, "sType": "date", "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) { $(nTd).html(getDate(ConvertJSONDateToJSDateObject(oData.RELEASE_DATE))); } } break; case "15": aoColumuShow[k] = { "mData": "D_DATE", "sTitle": "申报日期", "sClass": "taleft", "bSortable": false, "sType": "date", "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) { $(nTd).html(getDate(ConvertJSONDateToJSDateObject(oData.D_DATE))); } } break; case "16": aoColumuShow[k] = { "mData": "CONCLUDE_DATE", "sTitle": "审结日期", "sClass": "taleft", "bSortable": false, "sType": "date", "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) { $(nTd).html(getDate(ConvertJSONDateToJSDateObject(oData.CONCLUDE_DATE))); } } break; default: break; } k++; } } //设置列显示 function setShowCol() { oTable = GetList(); } function intialShowCol() { //显示列 colShowDic_key[0] = "1"; colShowDic_value[0] = "报关单号"; colShowDic_key[1] = "2"; colShowDic_value[1] = "申报海关"; colShowDic_key[2] = "3"; colShowDic_value[2] = "贸易方式"; colShowDic_key[3] = "4"; colShowDic_value[3] = "商品项号"; colShowDic_key[4] = "5"; colShowDic_value[4] = "征免方式"; colShowDic_key[5] = "6"; colShowDic_value[5] = "红绿通道"; colShowDic_key[6] = "7"; colShowDic_value[6] = "报关单位"; colShowDic_key[7] = "8"; colShowDic_value[7] = "收发货单位"; colShowDic_key[8] = "9"; colShowDic_value[8] = "进出口"; colShowDic_key[9] = "11"; colShowDic_value[9] = "征免性质"; colShowDic_key[10] = "12"; colShowDic_value[10] = "商品名称"; //隐藏列 colHiddenDic_key[0] = "10"; colHiddenDic_value[0] = "关区"; colHiddenDic_key[1] = "13"; colHiddenDic_value[1] = "规格型号"; colHiddenDic_key[2] = "14"; colHiddenDic_value[2] = "放行日期"; colHiddenDic_key[3] = "15"; colHiddenDic_value[3] = "申报日期"; colHiddenDic_key[4] = "16"; colHiddenDic_value[4] = "审结日期"; }
页面代码部分：
<!-- 设置显示列模态框（Modal） --> <!--Modal Start--> <div class="modal fade" id="setModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="overflow-y: hidden;"> <div class="modal-dialog"> <div class="modal-content" id="Detail"> <div class="tiptop"> <span>选择需要显示的列：</span><a data-dismiss="modal" aria-hidden="true"></a> </div> <div class="modal-body"> <div class="row" style="margin: -10px 0 10px 0;"> <div class="col-sm-6"><span style="font-weight:bold">可选显示列：</span></div> <div class="col-sm-6"><span style="font-weight:bold">已选显示列：</span></div> </div> <div class="row" style="overflow: hidden; height: 155px; line-height: 155px;"> <div class="col-sm-1" style="width: 30px"></div> <div class="col-sm-4" style="width: 200px;"> <select name="selectBefor" id="selectBefor" style="width: 200px; border: solid 1px #b1adad;" multiple="multiple" size="10"></select> </div> <div class="col-sm-2" style="width: 60px;"> <ul class="forminfo" style="width: 60px;"> <li><label></label></li> <li><label style="cursor: pointer;" onclick=" selectMove() "> > </label></li> <li><label></label></li> <li><label style="cursor: pointer;" onclick=" selectBack() "> < </label></li> <li><label></label></li> </ul> </div> <div class="col-sm-4" style="width: 200px;"> <select name="selectAfter" id="selectAfter" style="width: 200px; border: solid 1px #b1adad; " multiple="multiple" size="10"></select> </div> </div> </div> <div class="modal-footer"> <a href="#" class="btn btn-success" onclick=" ReSetShowCol() ">确认</a> <a href="#" class="cancel btn btnbord" data-dismiss="modal" aria-hidden="true">取消</a> </div> </div><!-- /.modal-content --> </div><!-- /.modal --> </div> <!-- ModalEnd -->
