关于Datatable使用json数据的问题

最新推荐文章于 2025-07-12 15:08:26 发布

最新推荐文章于 2025-07-12 15:08:26 发布 · 1.1k 阅读

文章标签：

博主在使用YUI框架制作表格时遇到dataerror错误，服务器通过PHP返回JSON数据。问题可能出现在JavaScript代码中如何配置数据源及请求参数。

刚刚接触YUI，制作一个表格，但在数据显示时遇到了data error的错误，服务器由PHP返回json数据。

firebug显示接收到的数据如下：
{
"total":17,
"results":[
{"hostid":"C1","name":"C1","ip":"192.168.1.241","sip":"","vendor":"CISCO","lrt":"2009-04-15 14:30:41","status":"On"},

{"hostid":"C2","name":"C2","ip":"192.168.1.242","sip":"","vendor":"CISCO","lrt":"2009-04-15 16:57:51","status":"On"},

{"hostid":"C4","name":"C4","ip":"192.168.1.244","sip":"","vendor":"CISCO","lrt":"2009-04-15 16:57:46","status":"On"},

{"hostid":"CSCO","name":"CSCO","ip":"192.168.1.243","sip":"","vendor":"CISCO","lrt":"2009-04-15 16:57:48","status":"On"},

{"hostid":"DR","name":"DR","ip":"192.168.1.130","sip":"","vendor":"JUNIPER","lrt":"2009-03-02 13:59:51","status":"On"}
]
}

javascript 代码：

(function(){
    var Dom = YAHOO.util.Dom,
    Evemt = YAHOO.util.Event,
    Sel = YAHOO.util.Selector;
    var feedURL = "PHP/service/hostService.php";
    var columnDefs = [
          {key:'', formatter: YAHOO.widget.DataTable.formatCheckbox,resizeable: false,sortable: false, width:10 },
          {key:"hostid",label: "Host ID",resizeable: true,maxAutoWidth: 60,sortable: true},
          { key:"name",label: "Name",resizeable: true,maxAutoWidth: 60,sortable: true} ,
          {key:"ip",label: "IP",resizeable: true,sortable: true },
          {key:"sip",label: "Secondary IP",resizeable: true,sortable: true  },
          { key:"vendor", label: "Hardware",resizeable: true,sortable: true},
          {key:"lrt",label: "Last Received Time", resizeable: true,sortable: true },
          {key:"status", label: "Receive Status",resizeable: true, sortable: true}
    ];

    var dataSource = new YAHOO.util.DataSource(feedURL);
    dataSource.connMethodPost = true;
    dataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
    dataSource.responseSchema = {
        resultList: 'results',
        fields : ["hostid","name","ip","sip","vendor","lrt","status"],
        metaFields : {
            totalRecords: "total"
        }
    };

    var requestBulider = function(oState, oSelf) {
        // Get states or use defaults
        oState = oState || {
            pagination:null,
            sortedBy:null
        };
        var sort = (oState.sortedBy) ? oState.sortedBy.key : "hostid";
        var dir = (oState.sortedBy && oState.sortedBy.dir === YAHOO.widget.DataTable.CLASS_DESC) ? "DESC" : "ASC";
        var startIndex = (oState.pagination) ? oState.pagination.recordOffset : 0;
        var results = (oState.pagination) ? oState.pagination.rowsPerPage : 5;

        // Build custom request
        var poststr = "task=getallhost" +
        "&fields=" + sort +
        "&dir=" + dir +
        "&start=" + startIndex +
        "&limit=" + results;
        alert(poststr);
        return poststr;
    };

    var tableCfg = {
        sortedBy: {
            key:'hostid',
            dir: YAHOO.widget.DataTable.CLASS_ASC
        },
        draggableColumns: true,
        initialRequest:"task=getallhost&dir=ASC&limit=5&sort=hostid&start=0",
        generateRequest : requestBulider,
        dynamicData: true,
        paginator : new YAHOO.widget.Paginator({
            containers: 'htpgnav',
            rowsPerPage    : 5 
        })
    };
    
    YAHOO.syslog.hosttable = new YAHOO.widget.DataTable('hosttable',columnDefs,dataSource,tableCfg);

})();

谢谢各位！