这是我第一次使用数据表,插件有一些问题。首先,除了它不喜欢对 Date 列或只有 1 个字符的“Success”列进行排序之外,它的所有工作都很好。对于其余的列,它将毫无问题地排序。我正在使用分页并一次加载 10 行。
这是我的 HTML:
<head>
<link href="styles/jquery-ui-1.8.18.custom.css" rel="stylesheet"/>
<link href="styles/style.css" rel="stylesheet"/>
<link href="styles/jquery-dataTables.css" rel="stylesheet"/>
<script type="text/javascript" src="javascript/jquery.js"></script>
<script type="text/javascript" src="javascript/jquery-ui.js"></script>
<script type="text/javascript" src="javascript/jquery-dataTables.js"></script>
<script type="text/javascript" src="javascript/jquery-dataTables-columnFilter.js"></script>
<meta name="viewport" content="maximum-scale=1.0, user-scalable=no,width=device-width, initial-scale=1">
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#dt_op').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "./test.cfm",
"iDisplayStart": 0,
//Table is initially sorted on 3rd col in Desc order.number
//Which is DateTime Visited in this case.
"aaSorting": [[3, "desc"]]
/*"aoColumnsDefs":
[
{"sType": "date", "aTargets": [5]},
{"sType": "string", "aTargets": [6]}
]*/
});
$('#dt_op').dataTable().columnFilter({
aoColumns:
[
null, null, null,
{type: "select", values: ['Web', 'Mobile']},
{type: "select", values: ['Windows Phone', 'iPhone', 'iPad', 'Android Mobile', 'Android Tablet', 'Other/Desktop']},
{type: "date-range"},
{type: "select", values: ['Y', 'N', 'X']}
]
});
} );
</script>
</head>
<body id="dt_op_body">
<div id="container">
<table cellpadding="5px" cellspacing="0" border="1" id="dt_op">
<thead>
<tr>
<th width="10%">IP Address</th>
<th width="50%">User Agent</th>
<th width="10%">Platform Category</th>
<th width="10%">Platform</th>
<th width="20%">Date/Time Visited</th>
<th width="10%">Successful Login</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="5">Loading Data from Server</td>
</tr>
</tbody>
<tfoot>
<tr>
<th></th>
<th></th>
<th>Platform Category</th>
<th>Platform</th>
<th>Date/Time Visited</th>
<th>Successful Login</th>
</tr>
</tfoot>
</table>
</div>
</body>
这是正在读取的 AJAX 文件:
<!--- table name --->
<cfset sTableName = "login_activity2" />
<!--- list of database columns which should be read and sent back to DataTables --->
<cfset listColumns = "remote_addr,user_agent,visited_on,login_success" />
<!--- Indexed column --->
<cfset sIndexColumn = "id" />
<!--- Paging --->
<!--- ColdFusion Specific Note: I am handling paging in the cfoutput statement instead of limit. --->
<cfparam name="url.iDisplayStart" default="0" type="integer" />
<cfparam name="url.iDisplayLength" default="10" type="integer" />
<!--- Filtering --->
<cfparam name="url.sSearch" default="" type="string" />
<!--- Ordering --->
<cfparam name="url.iSortingCols" default="0" type="integer" />
<cfquery datasource="#SQL#" name="getUserMetaData2" password="#password#" username="#username#"
cachedwithin="#createTimespan(0,0,1,0)#">
SELECT #listColumns#
FROM #sTableName#
<cfif len(trim(url.sSearch))>
WHERE
<cfloop list="#listColumns#" index="thisColumn">
<cfif thisColumn neq listFirst(listColumns)> OR </cfif>#thisColumn# LIKE
<cfqueryparam cfsqltype="CF_SQL_VARCHAR" value="%#trim(url.sSearch)#%" />
</cfloop>
</cfif>
<cfif url.iSortingCols gt 0>
ORDER BY
<cfloop from="0" to="#url.iSortingCols-1#" index="thisS">
<cfif thisS is not 0>, </cfif>#listGetAt(listColumns(url["iSortCol_"&thisS]+1))#
<cfif listFindNoCase("asc,desc",url["sSortDir_"&thisS]) gt 0>#url["sSortDir_"&thisS]#</cfif>
</cfloop>
</cfif>
</cfquery>
<cfquery datasource="#SQL#" name="getUserMetaDataCount" password="#password#" username="#username#">
SELECT COUNT(#sIndexColumn#) as total
FROM #sTableName#
</cfquery>
<!--- Creates and passes JSON object with operational info in it --->
<cfcontent reset="Yes" />
{
"sEcho": <cfoutput>#val(url.sEcho)#</cfoutput>,
"iTotalRecords": <cfoutput>#getUserMetaDataCount.total#</cfoutput>,
"iTotalDisplayRecords": <cfoutput>#getUserMetaData2.recordCount#</cfoutput>,
"aaData":
[
<cfoutput query="getUserMetaData2" startrow="#val(url.iDisplayStart+1)#" maxrows="#val(url.iDisplayLength)#">
<cfif currentRow gt (url.iDisplayStart+1)>,</cfif>
[
<cfloop list="#listColumns#" index="thisColumn">
<cfif thisColumn neq listFirst(listColumns)>,</cfif>
"#jsStringFormat(getUserMetaData2[thisColumn][getUserMetaData2.currentRow])#"
<cfif thisColumn eq 'user_agent'>
<!--- Add Comma to deliminate JSON fields properly --->
,
<cfset client.platform_category = "Mobile">
<cfset userAgent = getUserMetaData2[thisColumn][getUserMetaData2.currentRow]>
<cfif findNoCase('Windows Phone', userAgent, 1)>
<cfset client.platform = "Windows Phone">
<cfelseif findNoCase('iPhone', userAgent, 1)>
<cfset client.platform = "iPhone">
<cfelseif findNoCase('iPad', userAgent, 1)>
<cfset client.platform = "iPad">
<cfelseif findNoCase('Android', userAgent, 1) AND findNoCase('Mobile', thisColumn, 1)>
<cfset client.platform = "Android Mobile">
<cfelseif findNoCase('Android', userAgent, 1)>
<cfset client.platform = "Android Tablet">
<cfelse>
<cfset client.platform = "Other/Desktop">
<cfset client.platform_category = "Web">
</cfif>
"#client.platform_category#",
"#client.platform#"
</cfif>
</cfloop>
]
</cfoutput>
]
}
除了最后两个之外,我可以对所有列进行排序。我设置了它,所以它在加载时按日期 desc 排序,但如果我尝试再次对其进行排序,我会长时间看到“处理”屏幕并且它永远不会完成。我不确定为什么只是这两个字段导致问题。我试过设置索引,但没有帮助。SQL 语句在 Management Studio 中运行没有问题,所以我不知道实际问题可能是什么。有没有人有什么建议?谢谢