在更新YUI数据表时避免页面闪烁

为什么每次筛选数据时都要创建一个新的数据表?你不需要这个任务。

我已经创建了这个jsonObject来模拟过滤后的数据

var jsonObject = {
    "root":[
        {id:"5", userid:"1", name:"ar", designation:"1programmer", phone:"15484-8547", email:"1arthurseveral@yahoo.com.br", role:"1developer", empId:"1789", reportingto:"116"},
        {id:"5", userid:"2", name:"br", designation:"2programmer", phone:"25484-8547", email:"2arthurseveral@yahoo.com.br", role:"2developer", empId:"2789", reportingto:"216"},
        {id:"5", userid:"3", name:"cr", designation:"3programmer", phone:"35484-8547", email:"3arthurseveral@yahoo.com.br", role:"3developer", empId:"3789", reportingto:"316"},
        {id:"5", userid:"4", name:"dr", designation:"4programmer", phone:"45484-8547", email:"4arthurseveral@yahoo.com.br", role:"4developer", empId:"4789", reportingto:"416"},
        {id:"5", userid:"5", name:"er", designation:"5programmer", phone:"55484-8547", email:"5arthurseveral@yahoo.com.br", role:"5developer", empId:"5789", reportingto:"516"}
    ],
    "another":[
        {id:"5", userid:"5", name:"er", designation:"5programmer", phone:"55484-8547", email:"5arthurseveral@yahoo.com.br", role:"5developer", empId:"5789", reportingto:"516"},
        {id:"5", userid:"4", name:"dr", designation:"4programmer", phone:"45484-8547", email:"4arthurseveral@yahoo.com.br", role:"4developer", empId:"4789", reportingto:"416"},
        {id:"5", userid:"3", name:"cr", designation:"3programmer", phone:"35484-8547", email:"3arthurseveral@yahoo.com.br", role:"3developer", empId:"3789", reportingto:"316"},
        {id:"5", userid:"2", name:"br", designation:"2programmer", phone:"25484-8547", email:"2arthurseveral@yahoo.com.br", role:"2developer", empId:"2789", reportingto:"216"},
        {id:"5", userid:"1", name:"ar", designation:"1programmer", phone:"15484-8547", email:"1arthurseveral@yahoo.com.br", role:"1developer", empId:"1789", reportingto:"116"}
    ]
};

初始化时

(function() {
    var Yutil      = YAHOO.util,
        Ywidget    = YAHOO.widget

        DataTable  = Ywidget.DataTable,
        Paginator  = Ywidget.Paginator,
        DataSource = Yutil.DataSource;

    YAHOO.namespace("_3657287"); // QUESTION ID - SEE URL

    var _3657287 = YAHOO._3657287;

    /**
      * paginator
      */
    var paginator = new Paginator({
        rowsPerPage:25,
        template:Paginator.TEMPLATE_ROWS_PER_PAGE,
        rowsPerPageOptions:[10, 25, 50, 100],
        pageLinks:10
    });

    /**
      * dataSource
      *
      * As you have static data, I pass an empty "jsonObject" to its constructor
      */
    var dataSource = new DataSource({root:[]});
    dataSource.responseType = DataSource.TYPE_JSON;
    dataSource.responseSchema = {resultsList:"root", fields:[]};

    var columnSettings = [
        {key:"userid", label:"UserId"},
        {key:"name", label:"Name"},
        {key:"designation", label:"Designation"},
        {key:"phone", label:"Phone"},
        {key:"email", label:"Email"},
        {key:"role", label:"Role"},
        {key:"empId", label:"EmpId"},
        {key:"reportingto", label:"Reporting To"}
    ];

    dataSource.responseSchema.fields[0] = "id";
    for (var i = 0; i < columnSettings.length; i++) {
        dataSource.responseSchema.fields[i + 1] = columnSettings[i].key;
    }

    /**
      * Notice initialLoad equal To false (I suppose your dataTable IS NOT pre-populated)
      */
    var dataTableSettings = {
        paginator:paginator,
        initialLoad:false
    };

    /**
      * dataTable
      *
      * Notice IT IS STORED in the namespace YAHOO._3657287
      */
    _3657287.dataTable = new DataTable("container", columnSettings, dataSource, dataTableSettings);
})();

var i = 0;
YAHOO.util.Event.addListener("reload", "keyup", function(e) {
    YAHOO._3657287.dataTable.getDataSource().sendRequest(null, {
        success:function(request, response, payload) {

            /**
              * initializeTable method clear any data stored by The datatable
              */
            this.initializeTable();

            if(i === 0) {
                this.getRecordSet().setRecords(jsonObject["root"], 0);

                i++;
            } else {
                this.getRecordSet().setRecords(jsonObject["another"], 0);

                i--;
            }

            this.render();
        },
        scope:YAHOO._3657287.dataTable,
        argument:null
    });
});

here . !

但是如果效果再次出现(请注意,我只是使用了相关的部分-或特殊功能或其他东西)可能会发生,因为

• 数据表呈现

您可以如下设置变量

var isProcessing = false;

YAHOO.util.Event.addListener("reload", "keyup", function(e) {
    if(isProcessing) {
        return;
    }

    isProcessing = true;

    YAHOO._3657287.dataTable.getDataSource().sendRequest(null, {
        success:function(request, response, payload) {
             // as shown above

             isProcessing = false;
        }
    });
}

另请参见 here here

问题可能与线路有关:

myDataTable.resizeHack = function()
        { this.getTbodyEl().parentNode.style.width = "100%"; }

由于您正在调整表的宽度,因此可以合理地假设需要在屏幕上重新绘制表,从而导致闪烁。