Search code examples
mysqlajaxdatatabledatatablesyadcf

yadcf DataTables Tags for MySQL Database (Ajax, serverside False)

Using DataTables v1.10.13-dev

Along with Yet Another DataTables Column Filter - (yadcf) v0.9.1

Initializing my DataTable like so

$(document).ready(function() {
    var oTable;
oTable = $('#example').DataTable( {
            "pageLength": 50,
    "processing": true,
    "serverSide": false,
    "ajax": "scripts/server_processing.php",
    ....

Initializing yadcf in the same function immediately after like so

 yadcf.init(oTable, [{
                     //  column_number: 1,
                                            filter_type: "select",
                        column_data_type: "html",
                        html_data_type: "text",
                        filter_default_label: "Select tag"
                    }]);

It's initalizing all fine, so no issues there. I tested it with things such as column data input, column select input, it all works.

Here's how my datatable (and MySQL Database) is currently looking (without yadcf):

enter image description here

I'm looking to add another column, after Days Remaining, which is for tags

Here's a yadcf demo screenshot for a visual of what I'm looking to create.

enter image description here

Notice, of course, the last column, tags.

I've searched through the documentation, and through google.. but still am unaware of how to add tags in conjunction with my MySQL Database.

My question is, where are the tags or categories coming from? Is this just as simple as adding another column in my Inventory table, named Tags or Categories, and categorize my tags that way?

As you can see on my yadcf initialization, I first tested this on column_number: 1, which is my SKU

And it appeared, but nothing was in the drop down, and it was obviously incomplete.

enter image description here

Then again, SKU is a Unique column in my MySQL database, so this initialization is not for its intended purpose.

Can anyone shine some light on this for me? How do yadcf tags work in conjunction with a live MySQL Database.

I have 2000+ items to categorize, and want to make sure I have a grasp of this before undertaking it.

Solution

  • yadcf uses column_data_type: "html", html_data_type: "text",for the tag column because the structure of that column is in HTML format as following (and not a simple string inside the <td></td>

    Like this:

    <span class="label lightblue">Tag2</span> <span class="label lightblue">Tag3</span> I made the spans to look as they are with a bit of css

        .label {
        padding: 0px 10px 0px 10px;
        border: 1px solid #ccc;
        -moz-border-radius: 1em; /* for mozilla-based browsers */
        -webkit-border-radius: 1em; /* for webkit-based browsers */
        border-radius: 1em; /* theoretically for *all* browsers*/
    }

    .label.lightblue {
        background-color: #99CCFF;
    }

    This is a few words about the yadcf showcase page,

    So either decorate your html by hand and use something like column_data_type: "html", html_data_type: "text",

    Or with datatables Column rendering and use column_data_type: 'rendered_html' read docs for more info