jquery - How to use select2 infinite scroll with coldfusion? -
http://ivaynberg.github.com/select2/#infinite example given isn't explained , have no idea happening on end produce results.
edit: have changed cfc return limited amount of rows query. appended total row count hoping called ajax in data.total.
cfc:
<cffunction name="getclientsbyname" access="remote" returntype="string" output="true" hint="get clients search term"> <cfargument name="name" type="string" required="yes"> <cfargument name="page" type="numeric"> <cfargument name="page_limit" type="numeric"> <cfset var start = (arguments.page * arguments.page_limit) - arguments.page_limit + 1> <cfset var end = start + arguments.page_limit> <cfset var util = createobject("component", "/surveymanagement/jsonutil")> <cfset var results = arraynew(1)> <cfset var elem = ""> <cfset var total = ""> <cfquery name="getclientsbyname" datasource="#application.dsn#"> select client_id, client_name clients client_name <cfqueryparam cfsqltype="cf_sql_varchar" value="%#arguments.name#%"> order client_name </cfquery> <cfset total = structnew()> <cfset total["total"] = getclientsbyname.recordcount> <cfloop query="getclientsbyname" startrow="#start#" endrow="#end#"> <cfset elem = structnew()> <cfset elem["id"] = getclientsbyname.client_id> <cfset elem["text"] = getclientsbyname.client_name> <cfset arrayappend(results, elem)> </cfloop> <cfset arrayappend(results, total)> <cfcontent type="application/json" reset="true"><cfoutput>#util.serializejson(results)#</cfoutput><cfabort /> </cffunction> believe need alter sql cfarguments page , page_limit, don't know them. how should go limiting rows return page , adding next page of rows?
js:
$(".select").select2({ allowclear: true, bluronchange: true, openonenter: false, ajax: { url: "/surveymanagement/admin/client.cfc", datatype: 'json', quietmillis: 100, data: function (term, page) { return { method: "getclientsbyname", name: term, page_limit: 10, page: page }; }, results: function (data, page) { var more = (page * 10) < data.total; return { results: data, more: more }; } } }); it nice if found tutorial on how select2 incorporates infinite scroll.
i believe problem lies in results section of ajax call, not sure though.
server side
the end page must return json structure containing 2 values:
- total records found
- the results (ie. array of structures)
by default, plugin expects result structures contain 2 keys: "id" , "text". (technically can use different key names. however, if use different names, must code custom function(s) format results ie formatresult , formatselection.)
sample:
{"clients":[{"text":"client name abc","id":112}],"total":1} code:
<cffunction name="getclientsbyname" access="remote" returntype="string" output="false"> <cfargument name="name" type="string" required="yes"> <cfargument name="page" type="numeric" required="true"> <cfargument name="page_limit" type="numeric" default="10"> <cfset var startrow = (arguments.page * arguments.page_limit) - arguments.page_limit + 1> <cfset var endrow = startrow + arguments.page_limit> <cfset var util = createobject("component", "test.jsonutil")> <cfset var getclientsbyname = ""> <cfset var results = structnew()> <cfset var clients = arraynew(1)> <cfset var elem = ""> ... run db query .... <!--- use default keys: "id" , "text" ---> <cfloop query="getclientsbyname" startrow="#startrow#" endrow="#endrow#"> <cfset elem = structnew()> <cfset elem["id"] = getclientsbyname.client_id> <cfset elem["text"] = getclientsbyname.client_name> <cfset arrayappend(clients, elem)> </cfloop> <!--- package results structure ---> <cfset results["total"] = getclientsbyname.recordcount> <cfset results["clients"] = clients> <cfcontent type="application/json" reset="true"> <cfoutput>#util.serializejson(results)#</cfoutput><cfabort /> </cffunction> client side
your javascript needs slight tweak. since data structure, must add name of key containing results, ie
return { results: data.clients, more: more }; ... instead of
return { results: data, more: more }; optimization:
having said that, current code inefficient because retrieves entire table on every request. more efficient pagination on database side. database never returns more 10 records @ 1 time. exact syntax database specific:
(btw, many things in sql vary vendor. include database type , version in tags when question involves queries :)
Comments
Post a Comment