データテーブルを使用するのはこれが初めてで、プラグインにいくつか問題があります。まず第一に、日付列または1文字だけの「成功」列でソートするのが好きではないことを除いて、全体的にうまく機能しています。残りの列については、問題なくソートされます。ページングを使用して、一度に 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>
]
}
最後の 2 つを除くすべての列を正常に並べ替えることができます。ロード時に日付順でソートされるように設定しましたが、もう一度ソートしようとすると、「処理中」画面が長時間表示され、終了しません。この 2 つのフィールドだけが問題を引き起こしている理由がわかりません。インデックスを設定してみましたが、だめです。SQLステートメントはManagement Studioで問題なく実行されるため、実際の問題が何であるかについて途方に暮れています。誰か提案はありますか？ありがとう