Index

  1. Home
  2. Docs
  3. Index
  4. Shortcodes
  5. Styling ‘wpdataaccess’ pages

Styling ‘wpdataaccess’ pages

Shortcode wpdataaccess uses jQuery DataTables to generate dynamic HTML tables. The styling of your WordPress theme might interfere with the styling of these tables. For that reason a DataTable contains a lot of element ids and classes, which allow you to customize the styling of your DataTables. There are probably a number of ways to add css to your website. The simplest I guess is to use the appearance customizer in your WordPress dashboard (see video below).

The plugin adds an id to the table tag to allow you to uniquely style it without affecting other elements on your website. The table id contains the database table name and the publication id.

Examples

/* Wrap text in column option_value of table wp_options (pub_id=11) */
#wp_options11.dataTable.nowrap td {
	white-space: normal;
}

/* Wrap text in large columns of table demo_products, set max width to 300px (pub_id=2) */
#demo_products2.dataTable.nowrap td {
	white-space: normal;
	max-width: 300px;
}

/* Style column lastname of table wp_customers (pub_id=9) */
#wp_customers9 .lastname {
	background-color: yellow;
	color: red;
}

The above CSS styles column lastname of table wp_customers.

Watch this video to learn how to add custom css to your WordPress

 

Learn how to style jQuery DataTables

Was this article helpful to you? Yes No 1

9 Replies to “Styling ‘wpdataaccess’ pages”

  1. Two questions regarding the functionality of your plug-in.

    1) Does the following shortcode also work for MySQL tables that don’t reside in the WordPress database schema? E.g. [wpdataaccess table=”authors”]

    I have another schema in the same database which holds my custom tables. Normally I would prefix the table name with the schema name i.e. .. When I try this using the wpdataaccess shortcode i.e. [ wpdataaccess table=”aircrafttrafficsurvey.authors”] it does not appear to work i.e. error message about the table name. I have given access to the table and if I create a Publisher Id it works as expected.

    2) CSS support for jQuery DataTables. In your examples you demonstrate the ability to apply a style to rows and columns within a jQuery DataTable. I’m having a problem working through the examples. For example. You mention the following “table id contains the database table name and the publication id” but where do I get this information from? Do I first need to create/obtain a Publisher Id? Then what? Where generates the element names “#demo_products2……” and #wp_customers9 ……” ?

    Thanks and regards.

    Richard.

  2. Hi Peter,

    Further to my earlier posting, is your example shown below correct? I.e. is “.dataTable.” missing from the element name? Also is “wp_customer” the name of the actual table or the name shown in the Data Explorer front page? If it’s the actual name how should the data schema name be prefixed or does this only work for tables stored in the WordPress schema?

    /* Style column lastname of table wp_customers (pub_id=9) */
    #wp_customers9 .lastname {
    background-color: yellow;
    color: red;
    }

    Thanks and regards

    Richard.

  3. Hi Richard,

    1) You can use a table in another database like this:
    [wpdataaccess database="otherdatabase" table="authors"]

    Where otherdatabase can be a local or remote database. However, I would strongly advice to use the Data Publisher. The Data Publisher adds all necessary arguments to a publication for you. Much easier! 🙂

    You can find a list of all available parameters here:
    https://wpdataaccess.com/docs/documentation/shortcodes/shortcode-wpdataaccess/

    2) To find your table id try this:
    – Open the page that shows your table
    – Open the inspector (right mouse click > inspect)
    – Search for a table containing class wpda-datatable
    – Get the id of that table

    The table id contains:
    – the table name and publication id for publications created with the Data Publisher
    – the table name and a 0 for hardcoded publications (like yours)

    Columns are added as td tags. The class names added to these td tags is the same as the column name. So the example (#wp_customers9 .lastname) styles column lastname of table wp_customers for publication id 9.

    Hope this helps! 😉

    Best regards,
    Peter

  4. Hi Peter, that all worked well, many thanks. Maybe worth including some of your explanation in your existing examples. The combination of the ” .” is very subtle i.e. #wp_customers9 .lastname {…..

    I also used WordPress’ “Customising Additional CSS” to update the style sheet – the video you attached was very useful.

    Don’t suppose you know how to prevent the column headers being repeated at the end of a dataTable table. I assume something has to be included in the Publisher – Table options (advanced) section.

    Regards.

    Richard.

    1. Peter, thanks for all the help recently!

      I have been looking to disable the column headers being repeated in the footer as well. I have attempted this in the Data Publisher using the “Table options (advanced)”, but I cannot get it to work. Can you check and see what I am doing wrong?

      Here is what I have tried so far with no luck 🙁
      {“pageLength”:10,”dom”:”t”,”fixedHeader.footer”:”false”}
      {“pageLength”:10,”dom”:”t”,”fixedHeader”:”footer: false”}
      {“pageLength”:10,”dom”:”t”,”fixedHeader”:”footer.false”}
      {“pageLength”:10,”dom”:”t”,”footer”:”false”}

      Any tips?

  5. Seems like a very simple thing but cannot figure it out based on your above examples. How do I change the text color of the header font? Here is the shortcode that I am using in the “code” wordpress module: [wpdataaccess pub_id="1"]
    What CSS can I use? The above examples have syntax errors when placed in the CSS text boxes.

    1. Figured our how to change the header text color independently of the table text color.

      Page CSS:
      #rankme1.dataTable th{
      color:#e5aa18;
      }

      #rankme1.dataTable td{
      color:#17273a;
      }

      Next question, how do I modify the color of the text in the header? Near the search box, pagination, etc.

Leave a Reply

Your email address will not be published. Required fields are marked *