Styling specific rows in modal table

  • Resolved andyrayner

    (@andyrayner)


    6 years, 3 months ago

    Hello, I need to be able to target specific fields in the table for styling, adding content before / after certain rows and also to colour the cells depending on the content. I’ve managed to edit wpda_datatables.js to add the column name as a class on the <td>, but it would be better to use the actual column name from the database if possible as they won’t have spaces and are less likely to change. I’m not very handy with Javascript though so any pointers would be appreciated. Is that something that could be accessed in the existing data? or is there a better way?

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author Passionate Programmer Peter

    (@peterschulznl)

    6 years, 3 months ago

    Hi Andy,

    Let me see if understand your question:
    1) You want to identify cells by a classname that equals the column name
    2) You want to identify certain rows

    I understand your first question. I’ll see what I can do. Can you share your solution? It might save me some time…

    Not sure if I understand your second question. How would like to identify rows?

    Best regards,
    Peter

    Thread Starter andyrayner

    (@andyrayner)

    6 years, 3 months ago

    Hello Peter, (great plugin btw!)
    I can’t really share the link to the site as it is not really public and completely locked down behind a login page, but the relevant code I changed so far in wpda_datatables.js is:

    var data = jQuery.map(
	columns, function (col, i) {
		return '<tr>' +
		'<td class="' + col.title + '">' + col.title + '</td>' +
		'<td><strong>' + col.data + '</strong></td>' +
			'</tr>';
			}

    I haven’t got as far as understanding what other data is available to substitute into the td class, but my first thought is that the actual database table names could be unique enough to be able to target them directly. I suppose I could even add a suffix to the class as well in the above code if necessary.

    It’s pretty much so I can just add in some additional text & formatting rather than just straight rows of data (e.g add a row of blank space, add sub titles, make some of the rows red depending on content, etc.) Any help at this point would be appreciated.
    Many thanks,
    Andrew.

    • This reply was modified 6 years, 3 months ago by andyrayner.
    Plugin Author Passionate Programmer Peter

    (@peterschulznl)

    6 years, 3 months ago

    Hi Andrew,

    Thank you for sharing your code!

    Are you aware that tables generated from the plugin have a unique id which equals the database table name? Can you use the table id?

    If I add the column name to the class atribute you could use the table id in combination with the column class atribute. Would that be enough to achieve the results you are looking for?

    Best regards,
    Peter

    Thread Starter andyrayner

    (@andyrayner)

    6 years, 3 months ago

    Afternoon Peter,
    That would be great yes. I only have the one table of data at the moment as the client is supplying it as an Excel sheet, but I’m sure the table name will be useful at some point, these things have a habit of expanding.

    Many thanks,
    Andrew.

    (Original brief was ‘Can you put this info into a simple online database so we can share it?, needs a login & be searchable, and keep is as simple as possible.’ My initial stab was a simple WordPress site with a template page for each set of info to be dropped into. Next conversation was ‘Great, can I import it all from an Excel sheet?’ that’s when I looked at your plugin instead.)

    Plugin Author Passionate Programmer Peter

    (@peterschulznl)

    6 years, 3 months ago

    Hi Andrew,

    I liked your proposal 🙂 so I added a class containing the database column name to each cell of the DataTable. It will be available in version 2.7.0 which I hope to release before the end of this week. I just have to finish a few things.

    With version 2.7.0 you can style cells like this:
    #wp_customer .lastname { background-color: yellow; color: red; }

    Where
    wp_customers = your database table name
    lastname = your table column name

    I let you know when 2.7.0 is available. Thank you for your interesting feature request! 🙂

    Best regards,
    Peter

    Thread Starter andyrayner

    (@andyrayner)

    6 years, 3 months ago

    Afternoon Peter,
    Many thanks for this. I can’t wait to try it out.

    Andrew.

    Plugin Author Passionate Programmer Peter

    (@peterschulznl)

    6 years, 3 months ago

    Hi Andrew,

    I released version 2.7.0. Is contains your feature request.

    I’m closing this topic. Please feel free to open a new topic if you have a question or a new feature request.

    Best regards,
    Peter

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Styling specific rows in modal table’ is closed to new replies.