createdRow does nothing...

createdRow does nothing...

culorrotoculorroto Posts: 4Questions: 1Answers: 0
edited June 2018 in Free community support

Hello,

Im new in this, and found this plug-n really difficult to implement (Remember the old good times when adding a server datagrid was drag an drop and voila!!! working) set every single feature of this plug in is a nightmare, since add a button to refresh the grid or to add an export without your css crashes...

Todays pain is this:

Need to change cell colour when some data is X

 $(document).ready(function () {
                                           var oTable = $("#Table").DataTable({
                                               "scrollX": true,
                                               "ajax": {
                                                   "url": "datatblescrap",
                                                   "dataSrc": "",
                                                   "type": "POST",
                                                   "data": function ( d ) {
                                                       d.val1=  $("#xx").val() ,
                                                       d.val2 = $("#xx").val();
                                                   },
                                                   "createdRow": function (row, data, index) {
                                                       $(row).addClass("red");
                                                   },
                                               },
                                               "columns": [
                                                     { "data": "abc" },
                                                     { "data": "abb" }
                                               ]
                                           });

                                           $("#button").click(function () {
                                               $('#Table').DataTable().ajax.reload();
                                           });

                                       });

I saw a super basic example where it works, however this do nothing... what the hell i am doing wrong?

Its just a single line for gods sake...

Is there another plug in easy to use instead of this??
thanks.

Answers

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    edited June 2018

    That's pretty harsh criticism for your first post on the forum. I do agree there are lots of options and its not easy to initially get a handle on how to put a complex table together. However having a library that is flexible and provides lots of capability has a learning curve.

    The [example](https://datatables.net/reference/option/createdRow#Example) for-option createdRow` does show how to add a class based on the value of a the data in the row. In your code you are simply add the class "red" to each row and not checking any values.

    EDIT: You may also need to add something like this to apply the color to the .red class:
    .red {color:#FF0000;}

    Kevin

  • culorrotoculorroto Posts: 4Questions: 1Answers: 0
    edited June 2018

    Just put the "red" example, because something apparently so easy is not working...

    Of course have a style with this definition ".red {color:#FF0000;}", and of course didnt post the ifs to check the data values to change the colour, I just want to do something super easy, but this plug in is made of crystal, something out of the order crushes it, the flexibility is almost 0.

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    edited June 2018

    Your createdRow config works here:
    http://live.datatables.net/raxoxeqe/1/edit

    Of course have a style with this definition ".red {color:#FF0000;}"

    I've learned not to make any assumptions about what people have or don't have configured unless it is specifically noted.

    Maybe you can post a link to your page or create a test case showing your issues. There must be something specific to your environment that is causing the createdRow and maybe other issues.
    https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

    You can put a console.log statement inside the createdRow function to verify it is running. Maybe you can try applying your red class outside of the Datatable code to verify its working.

    something out of the order crushes it

    I guess you are referring to loading the JS include files? If so then yes there are dependancies on having some includes loaded before others. The Download builder is the easiest way to get the proper files and in the proper order.

    Kevin

  • culorrotoculorroto Posts: 4Questions: 1Answers: 0

    Discover that data[0] is undefined... however it returns an [object Object]

    I could change the cell colour, but without data values can not apply condition to do it... :(

  • culorrotoculorroto Posts: 4Questions: 1Answers: 0

    ok finally get some results... it is possible to change a cell specific colour instead of the entire row?

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    I've added code highlighting to your original post and that makes it easier to see that you've put createdRow inside the ajax object. createdRow should be at the top level, so it isn't working in your above example because DataTables isn't seeing it.

    it is possible to change a cell specific colour instead of the entire row?

    Yes - you could use columns.createdCell, or use your existing createdRow and either add a class to the columns you want using a jQuery selector on the tr element passed into the function, or have a class added to the row which you combine with a class on the columns in your CSS to give the styling required.

    Allan

This discussion has been closed.