1

我试图通过传入一个对象数组而不仅仅是一个数组来显示一个使用 jQuery 进行控制的表格。我想这样做，以便能够使用 DT_RowId 标签标记表的行。我需要这样做，以便可以将删除功能添加到可供用户使用的表中。以下是我正在尝试做的一些示例：

http://datatables.net/release-datatables/examples/server_side/object_data.html

http://datatables.net/release-datatables/examples/server_side/ids.html

我已经尝试使用以下代码以这些示例中显示的两种方式格式化我的数据：

searchWsConfigurations.jsp

<link rel="stylesheet" type="text/css" href="<c:url value='/styles/data_table.css'/>" />
<link rel="stylesheet" type="text/css" href="<c:url value='/styles/data_table_proper.css'/>" />
<link rel="stylesheet" type="text/css" href="<c:url value='/styles/demo_table_jui.css'/>" />
<script src="<c:url value='/javascript/jquery.dataTables.min.js' />" type="text/javascript"></script>

<script type="text/javascript">

$(document).ready(function() {

//Datatable transformations
$('#wsConfigurationTable').dataTable( {
    "bJQueryUI": true,
    "bPaginate": true,
    "bDeferRender": true,
    "bProcessing" : true,
    "bServerSide" : true,
    "sAjaxSource" : "<c:url value='/maintenance/searchWsConfigurationsServerSideProcessingReport.htm'/>",
    "iDeferLoading" : 10,
    "bLengthChange": true,
    "iDisplayLength": 10,
    "bFilter": false,
    "bSort": true,
    "aoColumns": [
                   { "mData": "testerId" },
                   { "mData": "date" },
                   { "mData": "hostName" },
                   { "mData": "ipAddress" },
                   { "mData": "alias" },
                   { "mData": "wsModel" },
                   { "mData": "operatingSystem" },
                   { "mData": "stRevisions" }],

    "bInfo": true,
    "bAutoWidth": true,
    "sPaginationType": "full_numbers"
});

}); 

</script>

<br>
<h2><tiles:getAsString name="heading" ignore="true"/></h2>
<br>

<a href="addWsConfiguration.htm"><img src="/vpdConsole/images/icons/add-icon-button_32x32.png" class="undecorated" style="float:right"/></a>

<table id="wsConfigurationTable" class="datatable">
    <thead>
        <tr>
        <th>Tester ID</th>
        <th>Entry Date</th>
        <th>Hostname</th>
        <th>IP</th>
        <th>Alias</th>
        <th>Model</th>
        <th>OS</th>
        <th>ST Rev</th>
    </tr>
</thead>
<tbody>
</tbody>
</table>

即使服务器返回我期望的内容，我也会不断收到有关列数的错误。这是我得到的回应：

{"sEcho":1,"iTotalRecords":13105,"iTotalDisplayRecords":13105,"aaData":[{"0":"Tester 1","1":"2013-05-14","2":"Host 1","3":"192.168.1.43","4":"Alias 1","5":"HP Proliant Server","6":"Red Hat Linux 5","7":"2.1.9","DT_RowId":"row_1","DT_RowClass":"visibleClass"},{"0":"Tester 1","1":"2013-05-14","2":"Host 1","3":"192.168.1.96","4":"Alias 1","5":"HP Proliant Server","6":"Red Hat Linux 5","7":"2.1.9","DT_RowId":"row_2","DT_RowClass":"visibleClass"},{"0":"Tester 1","1":"2013-05-15","2":"Host 1","3":"192.168.1.14","4":"Alias 1","5":"HP Proliant Server","6":"Red Hat Linux 5","7":"2.1.9","DT_RowId":"row_3","DT_RowClass":"visibleClass"},{"0":"Tester 10","1":"2013-05-14","2":"Host 10","3":"192.168.1.18","4":"Alias 10","5":"Sun Server X200","6":"Windows 7 Ultimate","7":"1.5.7","DT_RowId":"row_4","DT_RowClass":"visibleClass"},{"0":"Tester 10","1":"2013-05-14","2":"Host 10","3":"192.168.1.34","4":"Alias 10","5":"Sun Server X200","6":"Windows 7 Ultimate","7":"1.5.7","DT_RowId":"row_5","DT_RowClass":"visibleClass"},{"0":"Tester 10","1":"2013-05-15","2":"Host 10","3":"192.168.1.9","4":"Alias 10","5":"Sun Server X200","6":"Windows 7 Ultimate","7":"1.5.7","DT_RowId":"row_6","DT_RowClass":"visibleClass"},{"0":"Tester 100","1":"2013-05-14","2":"Host 100","3":"192.168.1.63","4":"Alias 100","5":"Sun Server X200","6":"Windows 7 Ultimate","7":"1.5.7","DT_RowId":"row_7","DT_RowClass":"visibleClass"},{"0":"Tester 100","1":"2013-05-14","2":"Host 100","3":"192.168.1.9","4":"Alias 100","5":"Sun Server X200","6":"Windows 7 Ultimate","7":"1.5.7","DT_RowId":"row_8","DT_RowClass":"visibleClass"},{"0":"Tester 100","1":"2013-05-15","2":"Host 100","3":"192.168.1.63","4":"Alias 100","5":"Sun Server X200","6":"Windows 7 Ultimate","7":"1.5.7","DT_RowId":"row_9","DT_RowClass":"visibleClass"},{"0":"Tester 1000","1":"2013-05-14","2":"Host 1000","3":"192.168.1.15","4":"Alias 1000","5":"Sun Server X200","6":"Windows 7 Ultimate","7":"1.5.7","DT_RowId":"row_10","DT_RowClass":"visibleClass"}]}

我不确定我需要做什么才能完成这项工作。我可以在使用常规数组时显示表格，但是当我将其切换到对象数组时，错误声称数据的大小未定义并且与已知的列数不匹配。任何帮助将不胜感激。

4

1 回答 1

1

请看这个jsfiddle：http: //jsfiddle.net/GqFcW/

双击任何行，您将收到带有行 ID 的警报。我修改了您的代码以使用对象数组，并且对象使用您提供的 mData 名称而不是“0”、“1”等。这里以第一行为例。

{"testerId":"Tester 1","date":"2013-05-14","hostName":"Host 1","ipAddress":"192.168.1.43","alias":"Alias 1","wsModel":"HP Proliant Server","operatingSystem":"Red Hat Linux 5","stRevisions":"2.1.9","DT_RowId":"row_1","DT_RowClass":"visibleClass"}

或者，您可以将对象数组与您拥有的相同，但将 mData 修改为

"aoColumns": [
                   { "mData": "0" },
                   { "mData": "1" },

等等。

因此，取消注释该"bServerSide" : true行，然后重新添加您的 ajax 调用。这应该有效。如果没有，您可能需要验证您的 JSON 是否按照您认为的那样返回。

于 2013-05-21T10:05:18.897 回答