Jquery 数据表未在其中一列上排序
这是我第一次使用datatables，这个插件有一些问题。首先，除了不喜欢按日期列或仅1个字符的成功列排序外，它在各个方面都工作得很好。对于其余的列，它将毫无问题地进行排序。我使用分页，一次加载10行Jquery 数据表未在其中一列上排序,jquery,coldfusion,datatables,Jquery,Coldfusion,Datatables,这是我第一次使用datatables，这个插件有一些问题。首先，除了不喜欢按日期列或仅1个字符的成功列排序外，它在各个方面都工作得很好。对于其余的列，它将毫无问题地进行排序。我使用分页，一次加载10行 <head> <link href="styles/jquery-ui-1.8.18.custom.css" rel="stylesheet"/> <link href="styles/style.css" rel="stylesheet"/> <
<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>
<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>
<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>
<!--- 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>
]
}
除了最后两列之外，我可以对所有列进行排序。我设置了它，所以它是按加载时的日期描述排序的，但如果我尝试再次排序，我会得到处理屏幕很长一段时间，它永远不会完成。我不知道为什么只是这两个领域引起了问题。我尝试过设置索引，但没有帮助。SQL语句在ManagementStudio中运行时没有问题，因此我不知道实际问题是什么。有人有什么建议吗？谢谢我认为最好的办法是使用firebug或chrome开发工具等工具来调查代码抛出的错误。我记得一般情况下，处理屏幕挂起时会出现一个错误。您可能需要粘贴由代码Dustin生成的原始JSON。这可能取决于数据库为你的约会生成了什么。您可能需要为日期列的输出添加一种格式，以符合jQuery所期望的日期。除了firebug/chrometools之外，在这些调试问题中，我将在写入正在执行的sql的aaData之后创建一个新节点，然后在sql编辑器中复制/粘贴以运行/检查errorsAlso，使用jsFormat可能会导致撇号编码问题，您的列中是否有撇号？也就是说，应该使用SerializeJSONL我要说的最后一件事是，我最近做了一个CF datatables实现，我已经设计了许多改进，使用来自查询的列列表，而不是一个单独的列数组，如果需要的话，我很乐意与大家分享
<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>