.I want to search for text in SharePoint List by entering text to be searched in the textbox. I have a webservice and I am get json response from it. My response looks like
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
{ "total":2, "page":1, "records":6, "rows": [{"ID":"1","Title":"1","Desc":"one"}, {"ID":"2","Title":"2","Desc":"two"}, {"ID":"3","Title":"3","Desc":"three"}, {"ID":"4","Title":"4","Desc":"four"}, {"ID":"5","Title":"5","Desc":"five"}, {"ID":"6","Title":"6","Desc":"six"} ]} |
My javascript looks like this
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
function GridSearchText() { $('#Tracking').GridUnload(); var text = $('#txttext').val().trim(); //my text to be searched $("#Tracking").jqGrid({ prmNames: { search: "isSearch", nd: null, rows: "numRows", page: "page", sort: "sortField", order: "sortOrder" }, postData: { PO_txt: text }, datatype: function (postdata) { $("#load_Tracking").show(); $.ajax({ url: "DataSources.aspx/GridText", data: JSON.stringify(postdata), type: "POST", contentType: "application/json", dataType: "JSON", success: function (data, st) { if (st == "success") { var grid = $("#Tracking"); var gridData = JSON.parse(data.d); grid.clearGridData(); if (gridData.rows.length > 0) { for (var i = 0; i < gridData.rows.length; i++) { row = gridData.rows<em class="d4pbbc-italic"></em>; grid.addRowData(i + 1, row); $("#load_PRTracking").hide(); } } else { $('.ui-jqgrid').hide(); alert("Text does not exist. No records to display."); } } }, error: function (data, textStatus) { $("#load_PRTracking").hide(); alert('Error loading Grid'); } }); }, autowidth: true, height: "500px", colNames: ["ID", "Title", "Desc"], colModel: [ { name: "ID", align: 'center', width: "1500px" }, { name: "Title", align: 'center', width: "2000px", sortable: false }, { name: "Desc", align: 'center', width: "1500px", sortable: false }, ], jsonReader: { root: "rows", page: "page", total: "total", records: "records", id: "ID", //index of the column with the PK in it repeatitems: false }, shrinktofit: true, rowNum: 3, rowList: [3, 6], pager: '#TrackingPager', sortname: "Title", sortorder: "asc", viewrecords: true, gridview: true, autoencode: true, loadonce: true, pgtext: "Page {0} of {1}", loadtext: "Searching Text ...!!!" }); $("#Tracking").jqGrid('gridResize', '#TrackingPager'); } |
I get the data on the grid but the pagination shows Page 1 of 0. Please help me in getting the pagination right.
Hi, I made the change now data doesn’t get binded to the grid. I removed ‘addrowdata’ and replaced with ‘addjsondata’.
function GridSearchText() {
$(‘#Tracking’).GridUnload();
var text = $(‘#txttext’).val().trim(); //my text to be searched
$(“#Tracking”).jqGrid({
prmNames: {
search: “isSearch”,
nd: null,
rows: “numRows”,
page: “page”,
sort: “sortField”,
order: “sortOrder”
},
postData: { PO_txt: text },
datatype: function (postdata) {
$(“#load_Tracking”).show();
$.ajax({
url: “DataSources.aspx/GridText”,
data: JSON.stringify(postdata),
type: “POST”,
contentType: “application/json”,
dataType: “JSON”,
success: function (data, st) {
if (st == “success”) {
var grid = $(“#Tracking”)[0];
grid.addJSONData(eval(“(“+data.responseText+”)”));
}
},
error: function (data, textStatus) {
$(“#load_PRTracking”).hide();
alert(‘Error loading Grid’);
}
});
},
autowidth: true,
height: “500px”,
colNames: [“ID”, “Title”, “Desc”],
colModel: [
{ name: “ID”, align: ‘center’, width: “1500px” },
{ name: “Title”, align: ‘center’, width: “2000px”, sortable: false },
{ name: “Desc”, align: ‘center’, width: “1500px”, sortable: false },
],
jsonReader: { root: “d.rows”, page: “d.page”, total: “d.total”,
records: “d.records”,cell: “cell”,
id: “PID”, //index of the column with the PK in it
userdata: “userdata”,
repeatitems: true },
shrinktofit: true,
rowNum: 3,
rowList: [3, 6],
pager: ‘#TrackingPager’,
sortname: “Title”,
sortorder: “asc”,
viewrecords: true,
gridview: true,
autoencode: true,
loadonce: true,
pgtext: “Page {0} of {1}”,
loadtext: “Searching Text …!!!”
});
$(“#Tracking”).jqGrid(‘gridResize’, ‘#TrackingPager’);
}
Hi, I made the change now data doesn’t get binded to the grid. I removed ‘addrowdata’ and replaced with ‘addjsondata’.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
function GridSearchText() { $(‘#Tracking’).GridUnload(); var text = $(‘#txttext’).val().trim(); //my text to be searched $(“#Tracking”).jqGrid({ prmNames: { search: “isSearch”, nd: null, rows: “numRows”, page: “page”, sort: “sortField”, order: “sortOrder” }, postData: { PO_txt: text }, datatype: function (postdata) { $(“#load_Tracking”).show(); $.ajax({ url: “DataSources.aspx/GridText”, data: JSON.stringify(postdata), type: “POST”, contentType: “application/json”, dataType: “JSON”, success: function (data, st) { if (st == “success”) { var grid = $(“#Tracking”)[0]; grid.addJSONData(eval(“(“+data.responseText+”)”)); } }, error: function (data, textStatus) { $(“#load_PRTracking”).hide(); alert(‘Error loading Grid’); } }); }, autowidth: true, height: “500px”, colNames: [“ID”, “Title”, “Desc”], colModel: [ { name: “ID”, align: ‘center’, width: “1500px” }, { name: “Title”, align: ‘center’, width: “2000px”, sortable: false }, { name: “Desc”, align: ‘center’, width: “1500px”, sortable: false }, ], jsonReader: { root: “d.rows”, page: “d.page”, total: “d.total”, records: “d.records”,cell: “cell”, id: “ID”, //index of the column with the PK in it userdata: “userdata”, repeatitems: true }, shrinktofit: true, rowNum: 3, rowList: [3, 6], pager: ‘#TrackingPager’, sortname: “Title”, sortorder: “asc”, viewrecords: true, gridview: true, autoencode: true, loadonce: true, pgtext: “Page {0} of {1}”, loadtext: “Searching Text …!!!” }); $(“#Tracking”).jqGrid(‘gridResize’, ‘#TrackingPager’); } |
Thanks for you suggestions.
I made changes to my code and now I am using SPServices, CAML Query and JQGrid to fetch and bind data. Now the data is binded to the grid. For 7 records, and rownum=5, it shows Page 1 of 2 and view 1-5 of 7; But when I click on next button to navigate to next page, Page 2 of 2 and view 6-7 of 7 is shown but the data in the grid doesn’t change. It still shows the first 5 items only.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 |
<script src="/SiteAssets/test%20js/jquery-1.8.2.js" type="text/javascript"></script> <script src="/SiteAssets/JqLib/i18n/grid.locale-en.js" type="text/javascript"></script> <script src="/SiteAssets/JqLib/jquery.jqGrid.min.js" type="text/javascript"></script> <script src="/SiteAssets/JqLib/jquery.SPServices-0.7.2.min.js" type="text/javascript"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/json2/20150503/json2.min.js" type="text/javascript"></script> <script type="text/javascript">// <![CDATA[ $(document).ready(function() { debugger; jQuery("#list").jqGrid({ datatype: GetMyData, colNames:["ID","Title","Description"], colModel:[{name:'ID',index:'ID',align:'left',sortable: true,width:"1500px"}, {name:'Title',index:'Title',align:'left',sortable: true, width:"1500px"}, {name:'Description',index:'Description',align:'left',sortable:true, width:"1500px"},], pager: true, pager: '#pager', pageinput: true, rowNum: 5, rowList: [5, 10, 20, 50, 100], sortname: 'ID', sortorder: "asc", viewrecords: true, autowidth: true, emptyrecords: "No records to view", loadonce: true, loadtext: "Loading..." }); jQuery("#list").jqGrid('navGrid', "#pager", { edit: false, add: false, del: false, search: true, refresh: true }); }); function GetMyData(){ var ex='e'; Query="<Query><Where><Or><Contains><FieldRef Name='Title'/><Value Type='Text'>"+ex+"</Value></Contains><Contains><FieldRef Name='Description' />"+"<Value Type='Text'>"+ex+"</Value></Contains></Or></Where></Query>"; var CAMLViewFields="<ViewFields><FieldRef Name='Title'/><FieldRef Name='Description'/> <FieldRef Name='ID'/></ViewFields>"; GetDataOnLoad(Query, CAMLViewFields); } function GetDataOnLoad(Query, CAMLViewFields) { $().SPServices({ operation: "GetListItems", async: false, listName: "List1", CAMLQuery:Query, CAMLViewFields:CAMLViewFields , completefunc: processResult }); } function processResult(xData, status) { var counter = 0; var newJqData = ""; debugger; $(xData.responseXML).SPFilterNode("z:row").each(function () { var JqData; if (counter == 0) { JqData="{"+'"id"'+":"+'"'+$(this).attr("ows_ID")+'",'+'"cell"'+":["+'"'+$(this).attr("ows_ID")+'",'+ '"'+$(this).attr("ows_Title")+'",'+ '"' +$(this).attr("ows_Description")+'"'+"]}"; newJqData = newJqData + JqData; counter = counter + 1; } else { var JqData="{"+'"id"'+":"+'"'+$(this).attr("ows_ID")+'",'+'"cell"'+":["+'"'+$(this).attr("ows_ID")+'",'+ '"'+$(this).attr("ows_Title")+'",' + '"'+$(this).attr("ows_Description")+'"'+"]}"; newJqData = newJqData +","+ JqData; counter = counter + 1; } }); FinalDataForGrid(newJqData, counter); } function FinalDataForGrid(jqData, resultCount) { debugger; dataFromList = jqData.substring(0, jqData.length - 1); var currentValue = jQuery("#list").getGridParam('rowNum'); var totalPages = Math.ceil(resultCount / currentValue); var PageNumber = jQuery("#list").getGridParam("page"); // Current page number selected in the selection box of the JqGrid newStr = "{"+'"total":'+'"'+totalPages+'",'+'"page":'+'"'+PageNumber+'",'+'"records":'+'"'+resultCount+'",'+'"rows":['+dataFromList+ "}]}"; var thegrid = jQuery("#list")[0]; var obj=JSON.stringify(newStr); thegrid.addJSONData(JSON.parse(newStr)); } // ]]></script> <table id="list" width="100%"></table> <div id="pager" style="text-align: center;"></div> |
Response looks like this:
{"total":"1","page":"1","records":"5","rows":[{"id":"1","cell":["1","1","one"]},{"id":"3","cell":["3","3","three"]},{"id":"5","cell":["5","5","five"]},{"id":"7","cell":["7","7","seven"],{"id":"8","cell":["8","8","eight"]},{"id":"9","cell":["9","9","nine"]},{"id":"10","cell":["10","10","ten"]}}
Response is this: Copied wrong text. Sorry about the confusion
{"total":"2","page":"1","records":"7","rows":[{"id":"1","cell":["1","1","one"]},{"id":"3","cell":["3","3","three"]},{"id":"5","cell":["5","5","five"]},{"id":"7","cell":["7","7","seven"],{"id":"8","cell":["8","8","eight"]},{"id":"9","cell":["9","9","nine"]},{"id":"10","cell":["10","10","ten"]}}
Copyright 2014 TriRand LtdAll Rights ReservedRSS
Back to Top
