This could be an issue in your column declaration. Try
{id: "detail_link", name: "Details ", field: "detail_link", headerCssClass:"cell-head", formatter: linkFormatter = function ( row, cell, value, columnDef, dataContext ) {return '<a href=\"MessageDetail.jsp?deviceID='+dataContext['id']+'\"><img src=\"images/info.png\" style=\"\" alt=\"info\"></a>';}, cssClass: "cell-row", width:55, resizable: false, selectable: true, sortable: false}
for your column definition and see if that fixes your dynamic link. You'll want to update the detail link in the data array to make it blank:
detail_link: ""
This will allow the linkformatter function to do its thing dynamically. I haven't tested this on your code but this has worked for me in the past.
edit: if you want the link to be the device_id and not id you'd use
{id: "detail_link", name: "Details ", field: "detail_link", headerCssClass:"cell-head", formatter: linkFormatter = function ( row, cell, value, columnDef, dataContext ) {return '<a href=\"MessageDetail.jsp?deviceID='+dataContext['device_id']+'\"><img src=\"images/info.png\" style=\"\" alt=\"info\"></a>';}, cssClass: "cell-row", width:55, resizable: false, selectable: true, sortable: false}