Download JQGrid from http://www.trirand.com/blog/?page_id=6
In test.cfm:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="jquery-uiGrid.css" />
<script src="grid.locale-en.js" type="text/javascript"></script>
<script src="jquery.jqGrid.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(e) {
jQuery("#domainUserGrid").jqGrid({
url:'cfc/user.cfc?method=getTestUser',
datatype: "json",
height: "auto",
colNames:['#','Username','Phone','Last Updated','Actions'],
colModel:[
{name:'userPhoneId_int',index:'userPhoneId_int', width:30},
{name:'username_vch',index:'username_vch', width:160},
{name:'phone_vch',index:'phone_vch', width:160},
{name:'dateUpdated_dt',index:'dateUpdated_dt', width:100},
{name:'actions',index:'actions', width:120}
],
rowNum:25,
pager: jQuery('#pager2'),
rowList:[10,20,30,40],
pager: '#pager2',
sortname: 'update_dt',
viewrecords: true,
sortorder: "desc",
caption:"Domain Users",
jsonReader: {
root: "ROWS", //our data
page: "PAGE", //current page
total: "TOTAL", //total pages
records:"RECORDS", //total records
cell: "CELL",
id: "" //will default first column as ID
}
});
});
</script>
<table id="domainUserGrid"></table> <div id="pager2"></div>
In cfc/user.cfc
<cfcomponent>
<cffunction name="getTestUser" access="remote" returnformat="plain">
<cfargument name="page" required="yes">
<cfargument name="rows" required="yes">
<cfargument name="sidx" required="yes">
<cfargument name="sord" required="yes">
<cfargument name="domain" required="yes">
<cfparam name="series" default="0">
<cfset var dataout = '0' />
<cfset var LOCALOUTPUT = {} />
<cfquery name="getUsers" datasource="#application.ds#">
SELECT userPhoneId_int,domainId_int,userid_int,insert_dt,update_dt,username_Vch,phone_vch
FROM users
<cfif sidx eq 'undefined' or sidx eq ''>
order by update_dt desc, insert_dt desc
<cfelse>
order by #sidx# #sord#
</cfif>
</cfquery>
<cfif getUsers.recordcount GT 0 AND rows GT 0>
<cfset total_pages = ceiling(getUsers.recordcount/rows)>
<cfelse>
<cfset total_pages = 0>
</cfif>
<cfset LOCALOUTPUT.PAGE = "#page#" />
<cfset LOCALOUTPUT.TOTAL = "#total_pages#" />
<cfset LOCALOUTPUT.RECORDS= #getUsers.RECORDCOUNT# />
<cfset start = ((page-1)*rows)+1>
<cfset end = page*rows>
<cfset LOCALOUTPUT.rows = ArrayNew(1) />
<cfset i = 1>
<cfloop query="getUsers" startrow="#start#" endrow="#end#">
<Cfset LOCALOUTPUT.ROWS[i] = StructNew() >
<cfset LOCALOUTPUT.ROWS[i].ID = "#userPhoneId_int#" />
<cfset dt = dateformat(update_dt,'mmm dd, yyyy') & ' ' & timeformat(update_dt,'HH:mm:ss')>
<cfset LOCALOUTPUT.ROWS[i].cell = [#numberformat(i)#,"#username_vch#","#phone_vch#","#dt#","Actions here"] />
<cfset i = i+1>
</cfloop>
<cfreturn SerializeJSON(LOCALOUTPUT)>
</cffunction>
</cfcomponent>
