解决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 -->