3

I have created list search by using REST api + javascript. Actually i'm getting list items from list by REST query and displaying these items in data table. this is fine to get and display list items according to search but how do i navigate to the item display page while clicking on item.

<script type="text/javascript">
function LoadWintermItems(department)
{
var call = $.ajax({
url: _spPageContextInfo.webAbsoluteUrl + "/_api/Web/Lists/GetByTitle('ABCD')/items?$select=SID,User%5Fx0020%5FName,Department12,Manufacturer,Model,SN,Install%5Fx0020%5FDate,Location/Location&$expand=Location/Location&$filter=(Location/Location eq '"+department+"')&$top=5000",
type: "GET",
dataType: "json",
headers: {
Accept: "application/json;odata=verbose"
}
});
call.done(function (data,textStatus, jqXHR){
$('#example').dataTable({
"bDestroy": true,
"bProcessing": true,
"aaData": data.d.results,
"aoColumns": [
{ "mData": "SID" },
{ "mData": "User_x0020_Name" },
{ "mData": "Department12" },
{ "mData": "Manufacturer" },
{ "mData": "Model" },
{ "mData": "SN" },
{ "mData": "Install_x0020_Date" },
{ "mData": "Location.Location" }
]
});
});
call.fail(function (jqXHR,textStatus,errorThrown){
alert("Error retrieving Tasks: " + jqXHR.responseText);
});
}
</script> 

I have implemented this followed by this WHO NEEDS A DATA VIEW WEB PART? SHAREPOINT REST AND DATATABLES.NET

I have changed as below according to @vadim suggestions below. But still have issues

<script type="text/javascript">
    function LoadWintermItems(department)
    {
        var call = $.ajax({
        url: _spPageContextInfo.webAbsoluteUrl + "/_api/Web/Lists/GetByTitle('ABCD')/items?$select=SID,User%5Fx0020%5FName,Department12,Manufacturer,Model,SN,Install%5Fx0020%5FDate,Location/Location&$expand=Location/Location&$filter=(Location/Location eq '"+department+"')&$top=5000",
        type: "GET",
        dataType: "json",
        headers: {  Accept: "application/json;odata=verbose" }
        });

        var queryOptions = {
            select: ['SID','ParentList/Forms','Id'],
            expand: ['ParentList/Forms']
        };  

        getListItems(_spPageContextInfo.webAbsoluteUrl,'ABCD',queryOptions).done(function (data){

        var tableData = [];
        data.value.forEach(function(item){

            //get List display form url 
            var displayForm = item.ParentList.Forms.filter(function(item){
                if(item.FormType == 4)
                   return item; 
            })[0];
            var itemDisplayFormUrl = displayForm.ServerRelativeUrl + '?id=' + item.Id; //construct list item display form url 

            tableData.push({'SID:': item.Title, 'DisplayFormUrl' : itemDisplayFormUrl})
        });

        //bind columns to datatable goes here...
        $('#example').dataTable({
            "bDestroy": true,
            "bProcessing": true,
            "aaData": data.d.results,
            "aoColumns": [
                            { "mData": "SID" },
                            { "mData": "User_x0020_Name" },
                            { "mData": "Department12" },
                            { "mData": "Manufacturer" },
                            { "mData": "Model" },
                            { "mData": "SN" },
                            { "mData": "Install_x0020_Date" },
                            { "mData": "Location.Location" }
                        ]
            });

        })


    call.fail(function (jqXHR,textStatus,errorThrown){
    alert("Error retrieving Tasks: " + jqXHR.responseText);
    });

    }

    function getListItems(webUrl,listTitle,queryOptions)
    {
        var requestUrl = webUrl + "/_api/Web/Lists/GetByTitle('" + listTitle + "')/items";
        if(queryOptions.select) {
            requestUrl += "?$select=" + queryOptions.select.join(',');
        }    
        if(queryOptions.expand) {
            requestUrl += "&$expand=" + queryOptions.expand.join(',');
        }    
        return $.getJSON(requestUrl);
    }         
</script>
2

Regarding

how do i navigate to the item display page

probably you are looking for a list item display form url, right? The following example demonstrates how to retrieve it with list items:

var queryOptions = {
    select: ['Title','ParentList/Forms','Id'],
    expand: ['ParentList/Forms']
};  
getListItems(_spPageContextInfo.webAbsoluteUrl,'Tasks',queryOptions)
.done(function (data){

    var tableData = [];
    data.value.forEach(function(item){

        //get List display form url 
        var displayForm = item.ParentList.Forms.filter(function(item){
            if(item.FormType == 4)
               return item; 
        })[0];
        var itemDisplayFormUrl = displayForm.ServerRelativeUrl + '?id=' + item.Id; //construct list item display form url 

        tableData.push({'Title:': item.Title, 'DisplayFormUrl' : itemDisplayFormUrl})
    });


    //bind columns to datatable goes here...
})
.fail(function (jqXHR,textStatus,errorThrown){
    console.log("An error occured: " + jqXHR.responseText);
});

where

function getListItems(webUrl,listTitle,queryOptions)
{
    var requestUrl = webUrl + "/_api/Web/Lists/GetByTitle('" + listTitle + "')/items";
    if(queryOptions.select) {
        requestUrl += "?$select=" + queryOptions.select.join(',');
    }    
    if(queryOptions.expand) {
        requestUrl += "&$expand=" + queryOptions.expand.join(',');
    }    
    return $.getJSON(requestUrl);
} 

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.