2013-10-22 29 views
2

我正在使用Coldfusion 9和Sql Server 2008 R2。我正在嘗試使用此顯示結果的實時搜索。Coldfusion和JQuery結果表格式

原貼是:http://www.raymondcamden.com/index.cfm/2011/2/1/Using-jQuery-to-search-against-different-types-of-content

我想將表添加到這一點,這樣我就可以得到它的格式。任何幫助都會很棒。

這是Search.cfm

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script> 
$(document).ready(function() { 

//http://stackoverflow.com/questions/217957/how-to-print-debug-messages-in-the-google-chrome-javascript-console/2757552#2757552 
if (!window.console) console = {}; 
console.log = console.log || function(){}; 
console.dir = console.dir || function(){}; 


//listen for keyup on the field 
$("#searchField").keyup(function() { 
    //get and trim the value 
    var field = $(this).val(); 
    field = $.trim(field) 

    //if blank, nuke results and leave early 
    if(field == "") { 
     $("#results").html(""); 
     return; 
    } 

    console.log("searching for "+field); 
    $.getJSON("test.cfc?returnformat=json&method=search", {"search":field}, function(res,code) { 
     var s = ""; 
     s += "<h2>Results</h2>"; 
     for(var i=0; i<res.fd_table.length; i++) { 
      s += "<p><b>uid:"+res.fd_table[i].fd_uid+"</b><br/>Device: "+res.fd_table[i].fd_dev + "<br/>"; 

     } 

     $("#results").html(s); 
    }); 
}); 
}) 

<form> 
Search: <input type="text" name="search" id="searchField"> 
</form> 

<div id="results"></div> 

演示從原崗位http://www.coldfusionjedi.com/demos/feb12011/test.cfm

這是我想達到的最終結果。

+0

你爲什麼要使用表?改用

  • ..
.etc! – user2595617

+0

http://www.w3schools.com/html/html_tables.asp。這是我試圖達到的結果的陰影。 – Seansa

+0

有什麼我可以去看看的例子嗎?所有的一直髮現是jQuery中的極端表格示例。想要簡單的一個 – Seansa

回答

2

您可能想了解如何使用JQuery動態構建表。你提出這個問題的方式聽起來很像「請完成我的家庭作業」,然後在合法項目上尋求幫助。

如果您查看代碼中存在的$ .getJSON()函數,使用變量s的方式將爲您提供有關如何實現這一點的可靠線索。一個表格是包含數據的X個包含t個單元格的行的X個tr標籤。從那裏,它只是循環查詢結果行爲您的tr標籤和每個列td標籤的問題。

不會爲您寫出代碼,但我已經給了您足夠的搜索JQuery文檔以指向正確的方向。

+0

我問的原因是因爲我沒有jQuery的知識。如果你能指點我一個類似的樣本,我會非常感謝你。 – Seansa

0

這是結果,我能夠做一個簡單的表。謝謝大家的建議。

console.log("searching for "+field); 
    $.getJSON("test.cfc?returnformat=json&method=search", {"search":field}, function(res,code) { 
     var s = "<table name='table1' border='1'><tr><th>Uid</th><th>Device</th><th>Region</th><th>Problem</th><th>Description</th><th>Resolution</th><th>Agent</th></tr>"; 

     s += ""; 
     for(var i=0; i<res.fd_table.length; i++) { 
      s += "<tr><td width='142' >"+res.fd_table[i].fd_uid+"</td><td>"+res.fd_table[i].fd_dev + 
      "</td><td>"+res.fd_table[i].fd_reg + 
      "</td><td> "+res.fd_table[i].fd_prob + 
      "</td><td> "+res.fd_table[i].fd_pdes + 
      "</td><td>"+res.fd_table[i].fd_res + 
      "</td><td> "+res.fd_table[i].fd_agent + 
      "</td>"; 
      s += "</tr>"; 
     } 
     s += "</table>"; 
     $("#results").html(s); 
    }); 
    }); 
})