HTML5 data-* is being ignored

johnblythe · May 2015

Hey there,

I'm trying to to sort one of our tables based off of a prescribed value according to the contextual value of a row. So, for instance, row A may have a smaller amount listed in the Price field, but it is actually given a high data-sort value because it is a higher relative price to an item it is in relation to than row B which has a higher absolute amount in the Price field yet lower relatively.

Even if that doesn't make sense :), what's happening is that a value is assigned to the <td>'s data-sort attribute in order to sort according to that yet it's the actual fields value that is being sorted on.

I have a regular <!DOCTYPE html> declaration, so I should be good to go w html5 usage and I have this in my initialization order: [[6, 'desc']]

Any help is appreciated!

allan · May 2015

Hi,

This example shows that HTML5 data-* attributes should be operating correctly, so in order to provide any help we would need to be able to see and debug your page. Could you provide a link please?

Allan

johnblythe · May 2015

Hey Allan,

Yup, that's where I had been looking for reference.

Here's the debug info: http://debug.datatables.net/azaris

allan · May 2015

Thanks for the debug link - I think the issue is that you are specifying columns.data properties for a DOM sourced table. DataTables is seeing that you are specifying a custom data point and therefore not overriding it, under the assumption that it should only mess with default values and not custom ones which could do more harm than good.

What you would need to do is something like:

data: {
  _: 'offerItem.display',
  sort: 'offerItem.@data-sort',
  order: 'offerItem.@data-sort'
}

i.e. tell it to read the attributes.

I haven't actually tested that code (edit as in for this specific case), but I think it should work... :-)

Allan

johnblythe · May 2015

Ooo I see. That makes sense. We're defining the columns dynamically in order to define them for Select2 and readonly usage because of Editor integration.

Here's what I've got based on what you posted above:

{
            label: "Offer Item #",
            name: "offerItem",
            type: "select2",
            data: {
              _: 'offerItem.display',
              sort: 'offerItem.@data-sort',
              order: 'offerItem.@data-sort'
            },
            opts: {
                ajax: { // instead of writing the function to execute the request we use Select2's convenient helper
                    url: config.base + '/products/getVendorCatalog',
                    dataType: 'json',
                    quietMillis: 250,
                    data: function (term, page) {
                        if (term == "Enter your cross") {
                            term = '';
                        }
                        return {
                            q: encodeURIComponent(term), // search term
                        };
                    },
                    results: function (data, page) { // parse the results into the format expected by Select2.
                        // since we are using custom formatting functions we do not need to alter the remote JSON data
// process stuff
... 
...
                        return { results: data };
                    },
                    cache: true
                },
                initSelection: function(element, callback) {
                    // the input tag has a value attribute preloaded that points to a preselected repository's id
                    // this function resolves that id attribute to an object that select2 can render
                    // using its formatResult renderer - that way the repository name is shown preselected

                    if (id !== "") {
                        $.ajax("/products/getVendorCatalog/", {
                            data: {term: id},
                            dataType: "json"
                        }).done(function(data) {
                            try {
                                if (data.length > 0) {
                                    data[0].id = data[0].id;
                                    callback(data[0]);
                                } else {
                                    callback({id: 0, text: "Search for your product"});
                                }
                            } catch(e) {}
                        });
                    }

                    callback({id: 0, text: "Search for your product"});

                },
                onChange: function(e) {
                    // submit it
                    editor.submit();
                }
            }
        },

I removed the <a> since it seemed contextually appropriate ('forums/...). No errors, but no luck. Am I misunderstanding?

johnblythe · May 2015

Gah, I should've thought a bit more before posting again :p

After establishing the Editor's fields, we then loop through the fields to assign to the actual DataTable initialization like so:

var dtfields = [];
   // 'fields' is what we had set up for Editor
    for (i in fields) {
        var dtfield = {data: fields[i].name};
    // process some in special manner
    // ...
    // ...
    //
    dtfields.push(dtfield);
    }

We then assign dtfields to columns.

I updated it to add the data element like you posted above with modifications:

if (fields[i].name == 'offerItem') {
            dtfield.data = {
                _: 'offerItem.display',
              sort: 'offerItem.@data-sort',
              order: 'offerItem.@data-sort'
            };
        }

And voila! Only one remaining question, it grouped them (score!) but items with a data-order of 5 come first, then 10, then 0. Is it because it's not ordering it as a number but as a string?

allan · May 2015

Hi,

Good to hear you are nearly there with it! You need to add the type option to your object as well, and point it also at the sort data, so the type detection can occur on that data, and thus numeric sorting will be run.

I really need to look at why the forum is attempting to add auto links in the code blocks...

Allan

johnblythe · May 2015

I'll be able to toy with this in a bit, but for conversation's sake I'll post my next question beforehand: I can have the sort data's type different than the actual column's display data, right?

I'll look around to see how to point the type to the data-sort in particular and see if I can push this over the finish line. Thanks for the help thus far!

allan · May 2015

Yes - display, sort, filter and type can all be different data points, or they can overlap.

Allan

johnblythe · May 2015

Hey Allan,

I'm back :)

The above worked and solved for the problem. It did have ramifications on my Editor set up, though.

I have a field that kicks into a select2 box on edit. I was receiving this error message:

http://www.datatables.net/manual/tech-notes/11#

So, I changed this:

editor.inline( this , {
                submitOnBlur: true
            });

to this:

editor.inline( this , 'offerItem' {
                submitOnBlur: true
            });

It does away with the error message, thankfully, and changes the field to a select2 box. However, now the select2 plugin isn't working.

Can you help me connect the dots a bit better? Thanks!

johnblythe · May 2015

Well that was fast :) Ends up it was due to a whole other, unrelated issue.

But...there is in fact a related problem. I'm getting the /tn/4 cryptic error on submit. Worse still, trying to use the debug bookmarklet to help figure things out gets this error: An error occurred, likely due to a circular reference
Any tips?

allan · May 2015

In the JSON data that is being returned from the Editor Ajax submit, is it returning the row object in the same format that is used for the DataTables load.

Allan

johnblythe · May 2015

I'm guessing not. I'm not seeing anything awry, but I think that's due to being iffy in what to look for. The data is sent back per usual. The only difference now being how the table/editor is set up per the above sorting parameters.

johnblythe · May 2015

More info!

Seems to be an issue at this point:

.on('preEdit', function(e, json, data) {
            data.offerItem = json.OfferVenIt;
            ...

Toying with it at present, but wanted to update the thread w that relevant info.

johnblythe · May 2015

I hate to be needy, Allan, but I'm still stumped on the above. Any insight or suggestion?

allan · May 2015

Sorry for the delay - did you look into what data is being returned by the server and ensuring that the row parameter has the same data structure as the data for the DataTable? You might need to use row().data() in your console to see what the data structure is for a row, since if you are loading it form the DOM it might not be as simple as my Ajax loading examples.

Allan

johnblythe · May 2015

My turn to apologize for delay :p

Some of this will be repetitive, but for sake of full clarity I figured I'd work through the entirety of the problems/solutions:

So if I group things correctly then I get this error on click when I go to edit:

Unable to automatically determine field from source. Please specify the field name

The event code is:

// submit the data when we leave the field
    $(document.getElementById(currentDtId)).on( 'click', 'tbody td:not(".readonly")', function (e) {
        if ($(this).hasClass('my-cross')) {
            editor.inline( this, {
                submitOnBlur: true
            });
        } else {
            editor.inline( this , {
                submitOnBlur: true
            });
        }

    } );

Quick context for above: items that we don't want the user to interact with are given a class of .readonly. Adding my-cross allows me to target that particular inline edit and have select2 appear successfully.

Upon selection from select2 I get the /tn/4 error saying that the an unknown [object Object] is present.

Here's what a row().data() looks like:

description: "Blahblah"
facilityItem: "12964"
last12Qty: "1"
offerDescription: "DBX Paste: 10cc"
offerItem: Object
   @data-sort: "9"
   display: "028100"
   __proto__: Object
offerPriceUom: "1607.00"
offerUom: "EA"
projectedSpend: "232323"
uom: "EA"
vendor: "AWESOME, INC."
vendorItem: "ASDF1234"

And the AJAX request returns this:

FacDesc: "Matchsticks ilium .5x5cm"
FacItem: "129387"
FacilityID: "1"
HistoricalStamp: "2015-05-19 07:22:17"
ID: "1116380"
LastPricePaid: null
MaxPricePaid: "985"
NoCross: "n"
OfferItDesc: "BELLADERM AWESOMENESS"
OfferPricePerUOM: "2699"
OfferUOM: "EA"
OfferUOMConv: "1"
OfferVenIt: "282612"
OfferVenItId: "309612376"
ProjectedSpend: 86368
SumOfPOQTY: "32"
TotalSpend: "9999999"
UOM: "PK"
UoMConversion: null
VenID: null
VenIt: "1011-12"
VenItId: "179711"
VenName: "CHOICEST EVER LP"
offerId: "500"

And, finally, I've got this on preEdit():

.on('preEdit', function(e, json, data) {
            data.offerItem        = json.OfferVenIt;

I think that's where the issue comes into play. json.OfferVenIt brings back 282612 but data.offerItem is now expecting that (housed in the display property) plus a @data-sort

Will try to solve for that and report back.

johnblythe · May 2015

And that does it! :)

Thanks a bunch for talking it out w me.

Best-

HTML5 data-* is being ignored

HTML5 data-* is being ignored

Answers

Howdy, Stranger!

Categories

DataTables

HTML5 data-* is being ignored

HTML5 data-* is being ignored

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables