HTML5 websql Dynamic Query front-end database table

HTML5 WEB SQL query Data $scope.querycenterreimbursdata = function (keyword,querycol) {var lencr= "0";//Stitching Sqlvar condition= "" ;//Spell filter condition var conditiontemp= "";//temporary filter condition variable var querycrsql= "";//Last Execution Sqlvar queryzxcols=new Array ();//queryzxcols = ["1", " 2 "]var selcolsql=" ";//spelling query field for (Var i=0;i<colattrs.length;i++) {selcolsql=selcolsql+" "+colattrs[i]+", ";} Selcolsql=selcolsql.substring (0, (selcolsql.length-1));//query field Queryzxcols=querycol.split (","); for (Var i=0;i< queryzxcols.length;i++) {if (i==0) {conditiontemp= colattrs[queryzxcols[i]]+ "like" + ' \ "' +keyword+ '%\" ';} else{conditiontemp= "OR" +colattrs[queryzxcols[i]]+ "like" + ' \ "' +keyword+ '%\" ';} Condition=condition+conditiontemp;} Limit limits the number of query bars. Google's Websql uses the SQLite database querycrsql= "select" +selcolsql+ "from (SELECT * from" +tableuniqueflag+ "WHERE" +condition+ ") Lim It "+rowsize;if (" "==keyword) {querycrsql=" select "+selcolsql+" from "+tableuniqueflag+" Limit "+rowsize;} Console.log ("Query table querycrsql===" +querycrsql);//splicing Sql//var db = OpenDatabase (' mydb14 ', ' 1.0 ',' Test DB ', 6 * 1024x768 *), var DB = datasourceservice.getconnection ();d b.transaction (function (TX) {Tx.executesql (queryc Rsql, [], function (TX, results) {LENCR = Results.rows.length;//len Temprow Control result returns the number of bars Var datacr= "";//Query Eligible center Reimbursement level two code var Datasum= ""; for (var i = 0; i < LENCR; i++) {datacr= ' {'; for (var j=0;j<showcols.length;j++) {var colattrsj=showcols[j] . Map;if (j== ((showcols.length)-1) {//json {"name": "Zhang San",。。。。。。 }datacr=datacr+ ' \ ' ' +colattrsj+ ' \ ' + ': ' + ' \ ' ' +results.rows.item (i) [' +colattrsj+ ' ']+ ' \ ';} else{datacr=datacr+ ' \ ' ' +colattrsj+ ' \ ' + ': ' + ' \ ' ' +results.rows.item (i) [' +colattrsj+ ' ']+ ' \ ', ';}} if (i== (lencr-1)) {//stitching into an array of JSON objects. [{JSON object},{json object},{json object}]//The last JSON object must have no comma, otherwise json.parse (datasum); conversion is unsuccessful. Datacr=datacr+ "}";} Else{datacr=datacr+ "},";} DATASUM=DATASUM+DATACR;} Datasum= ' [' +datasum+ '] '; Console.log (datasum) tableresultjson=json.parse (datasum); if (lencr>0) {if (lencr< rows) {rows=lencr+1;} $scope. createmytable (rows,cells);//Assign title for (Var j=1;j<parseint (cells) +1;j++) {var Titlecol=titlecoLs[j-1];var titleid= "#" +tableuniqueflag+ "1" + "" +j;$ (TitleID). HTML (titlecol);} Assign table contents var nn=0;for (var i=2;i<parseint (rows) +1;i++) {for (var j=1;j<parseint (cells) +1;j++) {var colattr = Colattrs[j-1];var tdid= "#" +tableuniqueflag+i+ "" +j;$ (Tdid). html (tableresultjson[nn][' +colattr+ ']);} nn=nn+1;} The default table first row is selected (except for the header row) $ ("#" +tableuniqueflag+ "2"). AddClass ("Checktrcolor"); $ (mydivlocation). CSS (' Display ', ' block '); Rows=rowsize;} else{//$ (mydivlocation). CSS (' Display ', ' none ');/}}, null);});

Array of stitched JSON objects

[
{
"AKB020": "00001",
"AKB021": "Service Station 1",
"AKA020": "Ftqcxdjdyhzsqwsfwz"
},
{
"AKB020": "00002",
"AKB021": "Service Station 2",
"AKA020": "Ftqdhmjdshsasqwsfwz"
},
{
"AKB020": "00003",
"AKB021": "Service Station 3",
"AKA020": "Ftqlgqjdlblsqwsfwz"
}
]

Application:

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

HTML5 websql Dynamic Query front-end database table