How do I do a simple rowCallback to highlight a row when using an ajax call

How do I do a simple rowCallback to highlight a row when using an ajax call

vansinvansin Posts: 15Questions: 4Answers: 0
    $(document).ready(function () {

        var table = $('#logistics').DataTable({

            ajax: {
                url: '?handler=display',
                data: {},
                dataSrc: ''
            },

            "rowCallback": function (row, data) {
                    $('td:eq(1)', row).html('<b>A</b>');
            },
            columns: [
                {
                    data: 'logisticsId'
                },
                {
                    data: 'shipWeek',

                },
                {
                    data: 'shipDate'
                }
            ]
        });
    })

This question has accepted answers - jump to:

Answers

  • kthorngrenkthorngren Posts: 21,261Questions: 26Answers: 4,934

    Take a look at this example. The functionality of createdRow and rowCallback are the same. The difference is createdRow runs once where rowCallback runs each time the row is rendered. Use createdRow if the data doesn't change or if it can change then use rowCallback.

    Kevin

  • vansinvansin Posts: 15Questions: 4Answers: 0

    Thanks. I have looked at many examples including the one you suggested but I am missing something. It all works fine in the examples I find but when I try and use createdRow or rowCallback it in combination with Ajax to get the table data it doesn't work.

  • kthorngrenkthorngren Posts: 21,261Questions: 26Answers: 4,934

    What doesn't work?

    Do you get errors in the browsers console?

    Here is a base ajax example:
    http://live.datatables.net/ajax-objects/1/edit

    Can you update the example to show the problem you are having?

    Kevin

  • vansinvansin Posts: 15Questions: 4Answers: 0

    Ok can we do this? Using that base ajax example how would I highlight a row based on a simple condition? Even playing with that base example I don't seem to understand how to make that work.

  • kthorngrenkthorngren Posts: 21,261Questions: 26Answers: 4,934
    Answer ✓

    Thats the point is for you to show us what is not working so we can help.

    Here is an example using ajax and rowCallback:
    http://live.datatables.net/cotagohi/1/edit

    Kevin

  • vansinvansin Posts: 15Questions: 4Answers: 0

    If use createdRow: instead of "createdRow" it works (removed the quotations).

  • vansinvansin Posts: 15Questions: 4Answers: 0

    Thank you for your assistance.

  • vansinvansin Posts: 15Questions: 4Answers: 0

    How do I highlight rows on the next page in the table? That is my next challenge.

  • kthorngrenkthorngren Posts: 21,261Questions: 26Answers: 4,934

    createdRow and rowCallback will highlight rows when they are displayed. See this example:
    http://live.datatables.net/cotagohi/2/edit

    Go through the pages to see. Please update the test case showing us what you are doing so we can help.

    Kevin

  • vansinvansin Posts: 15Questions: 4Answers: 0
    edited February 2022

    Taking your example I would like to do something like this to highlight duplicates but it doesn't extend to all the pages.

    $(document).ready(function() {
    var names = [];
    var dupliacteName = [];

    $('#example').dataTable( {
    "ajax": "/ajax/objects.txt",
    "columns": [
    { "data": "name" },
    { "data": "position" },
    { "data": "office" },
    { "data": "extn" },
    { "data": "start_date" },
    { "data": "salary" }
    ],
    rowCallback: function (row, data) {```
    let name = data.position;
    if (names.indexOf(name) > -1) {
    dupliacteName.push(name);
    }
    $(row).attr('data-val', name).css({
    "color": "black"
    });
    names.push(name);
    },
    initComplete: function (settings, json) {
    $.each(dupliacteName, function (index, name) {
    $("[data-val='" + name + "']").css({
    "color": "red"
    });
    });
    }

    } );
    } );

  • vansinvansin Posts: 15Questions: 4Answers: 0

    I would like to modify the example "http://live.datatables.net/cotagohi/2/edit" with something like below to find and highlight duplicates. This works on the first page but does not extend to the other pages.

    $(document).ready(function() {
    var names = [];
    var dupliacteName = [];
    $('#example').dataTable({
    "ajax": "/ajax/objects.txt",
    "columns": [{
    "data": "name"
    },
    {
    "data": "position"
    },
    {
    "data": "office"
    },
    {
    "data": "extn"
    },
    {
    "data": "start_date"
    },
    {
    "data": "salary"
    }
    ],
    rowCallback: function(row, data) {
    let name = data.position;
    if (names.indexOf(name) > -1) {
    dupliacteName.push(name);
    }
    $(row).attr('data-val', name).css({
    "color": "black"
    });
    names.push(name);
    },
    initComplete: function(settings, json) {
    $.each(dupliacteName, function(index, name) {
    $("[data-val='" + name + "']").css({
    "color": "red"
    });
    });
    }
    });
    });

  • kthorngrenkthorngren Posts: 21,261Questions: 26Answers: 4,934
    edited February 2022 Answer ✓

    You can try updating the test case yourself :smile: I took your code and updated the test case:
    http://live.datatables.net/cotagohi/7/edit

    One change I made is to use drawCallback instead of initComplete. initComplete runs only once after initialization. drawCallback will run each table draw.

    I'm not sure the code is achieving exactly what you want. Eventually all of the rows will be highlighted.

    This might be closer:
    http://live.datatables.net/lecafoxa/1/edit

    I setup some fake data to have a couple of duplicate names (Ashton Cox and Quinn Flynn). It uses rows().every() to loop all the rows in initComplete. It uses the code you created to keep a list of duplicate names. It stores the duplicate rows in the duplicateRows array. then loops the array to get the row().node() to set the CSS.
    http://live.datatables.net/lecafoxa/1/edit

    Kevin

  • vansinvansin Posts: 15Questions: 4Answers: 0

    I like the last example. That seems to work really well. I appreciated your help.

Sign In or Register to comment.