locked
How to make data table column link to item using Ajax to json to data table jquery RRS feed

  • Question

  • Hey,

    I have a page using this process to get list data http://summit7systems.com/who-needs-a-data-view-web-part-sharepoint-rest-and-datatables-net/

    It works great, i have my data within a data table. But how can I make a column like to the display form of the list item? Would you have to use JQuery to select each title cell? Not sure how i would do that, any help would be appreciated!

    Thanks

    Friday, November 13, 2015 1:19 AM

Answers

  • Hi Palumbob,

    We can use Jquery DataTables "fnRowCallback" function to redirect the field to a display form by adding hyperlink url to the column.

    Here is a code snippet for your reference:

    $('#example').dataTable({
         "bProcessing": true,
         "bServerSide": true,
         "sAjaxSource": "archive/archive.txt"
         "fnRowCallback": function( nRow, aData, iDisplayIndex ) {
                $('td:eq(2)', nRow).html('<a href="view.php?comic=' + aData[2] + '">' +
                    aData[2] + '</a>');
                return nRow;
            },
    });

    Here is a similiar thread for your reference:

    create links in record fields in DataTables from JSON data

    More information:

    DatatTable callback function

    Thanks

    Best Regards


    TechNet Community Support
    Please remember to mark the replies as answers if they help, and unmark the answers if they provide no help. If you have feedback for TechNet Support, contact tnmff@microsoft.com.

    Monday, November 16, 2015 3:54 AM
  • Hi Palumbob,

    The DataTable function will bind according to the table td id not item ID.

    If you want to link to the edit form, you will change the url in .html() function.

    Also, I suggest you can create thread in the Jquery DataTable forum, you will get more detailed information from there and more experts will help you.

    DataTable Forum

    Thanks

    Best Regards


    TechNet Community Support
    Please remember to mark the replies as answers if they help, and unmark the answers if they provide no help. If you have feedback for TechNet Support, contact tnmff@microsoft.com.

    Tuesday, December 1, 2015 3:12 AM

All replies

  • Hi Palumbob,

    We can use Jquery DataTables "fnRowCallback" function to redirect the field to a display form by adding hyperlink url to the column.

    Here is a code snippet for your reference:

    $('#example').dataTable({
         "bProcessing": true,
         "bServerSide": true,
         "sAjaxSource": "archive/archive.txt"
         "fnRowCallback": function( nRow, aData, iDisplayIndex ) {
                $('td:eq(2)', nRow).html('<a href="view.php?comic=' + aData[2] + '">' +
                    aData[2] + '</a>');
                return nRow;
            },
    });

    Here is a similiar thread for your reference:

    create links in record fields in DataTables from JSON data

    More information:

    DatatTable callback function

    Thanks

    Best Regards


    TechNet Community Support
    Please remember to mark the replies as answers if they help, and unmark the answers if they provide no help. If you have feedback for TechNet Support, contact tnmff@microsoft.com.

    Monday, November 16, 2015 3:54 AM
  • Hi,

    Thanks for the reply, would the above code block only set a link on the item with an ID of 2?

    what if i wanted to have all of them linkable to their edit form if this was pulling list data?

    Friday, November 27, 2015 2:42 PM
  • Hi Palumbob,

    The DataTable function will bind according to the table td id not item ID.

    If you want to link to the edit form, you will change the url in .html() function.

    Also, I suggest you can create thread in the Jquery DataTable forum, you will get more detailed information from there and more experts will help you.

    DataTable Forum

    Thanks

    Best Regards


    TechNet Community Support
    Please remember to mark the replies as answers if they help, and unmark the answers if they provide no help. If you have feedback for TechNet Support, contact tnmff@microsoft.com.

    Tuesday, December 1, 2015 3:12 AM