Mustache support

cemdev

I love datatables. BUT - we use some relatively complex layouts which works great if we use DT with html in the dom. That approach is limited however - we find it's okay if you have less than 1000 rows, more than that and it starts to get pretty slow.

However - using JSON as a data source means we end up with some nasty HTML strings in our JS that is just hard to maintain (and build). Streamtables.js - although seriously limited in a number of ways offers Mustache and Handlebars support which goes a long way to letting us achieve more advanced layouts with JSON data.

I'd LOVE to see mustache support in datatables. Would have posted in the Feature Request forum, but don't seem to be able to.

tangerine

@cemdev: I'm curious about this. I don't understand why you "end up with some nasty HTML strings" in your JS. Also to my way of thinking DataTables is template-agnostic, making core support for Mustache irrelevant.
I know this is no help :-) and I'm no expert, but could you clarify your requirements?

cemdev

Maybe I'm missing something - and I would LOVE to be corrected - but I'm confused by your confusion :)

Let's say I want to have 2 pieces of data in one column. If I output that in the HTML - it's very simple to achieve that in DT. But if I am populating DT via JSON instead of via the DOM, then I have to create the HTML in the DT table definition.

As an example (from DT's official docs):

$('#example').DataTable( {
         ajax: "../php/staff.php",
        columns: [
            { data: null, render: function ( data, type, row ) {
                // Combine the first and last names into a single table field
                return data.first_name+' '+data.last_name;
            } },
            { data: "position" },
            { data: "office" },
            { data: "extn" },
            { data: "start_date" },
            { data: "salary", render: $.fn.dataTable.render.number( ',', '.', 0, '$' ) }
        ]
    } );

That's just 2 fields with a space - we have more complex layouts with icons and specific HTML - easy to achieve via the DOM, relatively easy with templating, nasty with HTML strings in the table definition.

allan

The only software that DataTables depends upon is jQuery - this will not change. I will not add any other dependency to the core.

Adding template support is something that I can see would be useful, although this should be done via an optional plug-in - possibly a rendering function that can just be applied to all columns and the plug-in would handle the rendering.

Allan

cemdev

Support via a plugin would be superb.

tangerine

I have to create the HTML in the DT table definition

We have a terminology - or way of thinking - difference here. To me, the example you posted is not creating any HTML. It is handling the data for display within the HTML. My HTML tables exist independently of DataTables, and are called up within PHP scripts as required.

I'm not claiming there's a right/wrong issue here; but I've never found any use for templating systems like Mustache.

cemdev

the example I provided was very simple.

Here's an example of ONE table cell from one of our tables:

           <td class=" sorting_1">
                <span style="display: none;" title="287"></span>
                <div class="totalCount" data-rel="tooltip" title="" data-original-title="Total Number of Social Signals">287</div>

                <div class="socialwrapper">
                    <div class="socialblock blue" data-rel="tooltip" title="" data-original-title="Facebook Comments"><i class="icon-comments-alt"></i><span>2</span></div>
                    <div class="socialblock blue" data-rel="tooltip" title="" data-original-title="LinkedIn Shares"><i class="icon-linkedin"></i><span>25</span></div>
                    <div class="socialblock blue" data-rel="tooltip" title="" data-original-title="Facebook Likes"><i class="icon-thumbs-up-alt"></i><span>7</span></div>
                    <div class="socialblock blue" data-rel="tooltip" title="" data-original-title="Tweets"><i class="icon-twitter"></i><span>231</span></div>
                    <div class="socialblock blue" data-rel="tooltip" title="" data-original-title="Facebook Shares"><i class="icon-share"></i><span>22</span></div>
                    <div class="socialblock blue" data-rel="tooltip" title="" data-original-title="Facebook Unique Impressions"><i class="icon-facebook"></i><span>3945</span></div>
                </div>
            </td>

Now you can argue if that's right/wrong all day long - but it's a nice presentation for our users. Using DataTables - the ONLY way I can achieve that is via HTML then populating DT from the DOM (which works great, but is super slow), or to create all that HTML server side and pass it as cell data - or create an awful mess in the JS as I've already described. Using Mustache this would actually be very, very simple.

cemdev

that got split up - but anyways, you get the point. there's a lot of HTML in some of our table cells.

ThomD

I can appreciate that DT has limits, but I'm not sure you've fully tapped the possibilities.

I agree, DOM sourced data is probably slow. I don't use it. I do add classes and other html attributes to table objects using the various call backs (row created, InitComplete, etc)

One of the things that I'm working on is a better understanding of where DT stops and JQuery techniques start in manipulating my output.

DT is like an onion (or parfait, because who doesn't like parfait?), it's got layers.

allan

Are you able to give an example of how you would code that HTML in Mustache? It isn't something I've used much, and I don't see how it would be much shorter in code (although it would be a string used rather than a function).

Allan

cemdev

Well, the template would be on the page and doesn't require any string manipulation or concatenation. Just plain old HTML with some Mustache variables wrapped inside of a script tag with an id.

As a brief example: (this defines the entire row)

<script id="template" type="text/html">
  <tr>
<td>{{PlainOldValue}}</td>
<td>{{PlainOldValue2}}</td>
    <td>
<div class="socialblock blue" data-rel="tooltip" title="" data-original-title="Facebook Comments"><i class="icon-comments-alt"></i><span>{{FacebookComments}}</span></div>
         <div class="socialblock blue" data-rel="tooltip" title="" data-original-title="LinkedIn Shares"><i class="icon-linkedin"></i><span>{{LinkedInComments}}</span></div>
</td>

  </tr>
</script>

With the 4 pieces of JSON data there being FacebookComments and LInkedInComments and PlainOldValue and PlainOldValue2

render it in Mustache, and define the view in the table initiation - much like stream table does it: https://github.com/jiren/StreamTable.js/

jLinux

So im not going to read through all of this, but are you looking for mustache support to render the table itself? THEN have DataTables initiate ontop of that? Or looking for mustache to render the contents of the td cells?

If its the former, then use mustache in your backend, thats what I do. If its the latter, then I have some code for that.

I have a table that is used to create or edit existing database tables, each row is a column, if editing, then the rows are added via PHP, with the entire tr as a mustache template, and the new rows are added via jQuery, using the same mustache template

P.S. I hate mustache, I regret using it, Im going to switch to twig

cemdev

The latter - to render the td cells. you've got something working client side to use Mustache.js with DT?

jLinux

Sure, its not.. perfect... but it works.

Basically, the entire tr is its own template, then when its loaded via JS, I $.get() the template, pull out the contents of each td, and load that into a new row.

jLinux

Heres the JS code (I only took the relevant parts, I think I got everything, if I missed something, lmk)
http://code.linuxdigest.org/view/1fe43a24

And heres my mustache template: http://code.linuxdigest.org/view/93d9598d

And I know its a very un-conventional, messy way of doing this, which is why I am going to switch to Twig, and I suggest you do the same.

jLinux

Also, @cemdev, if you're wondering why I have the parse_mustache function, my biggest issue was that the mustache templates would be rendered with the {{ tags as {{="", and the }} as }}="" sometimes, I couldn't for the life of me find out why, but it was leading to all types of fu*ked up JS errors

Here is the exact output of that .mustache template, before parsing it: http://code.linuxdigest.org/view/6b756e4e#L33

Just open that, then Ctrl + F {{=""

I couldnt find ANY fixes for it, so I created that function, and it works fine.

EDIT: Something else you could do, which im not going to, but I probably should have (lol), is just have the mustache content rendered in the cell (meaning, dont Mustache.render the data when you add the row), but then use the createdRow option to render the contents.. that would probably be better.

cemdev

Yeah, I'm not sure I'm following the add_row() function, I definitely want to avoid having to do something like that. Like you say - rendering the entire row in Mustache is what I'm hoping to achieve. I appreciate this though- makes it look like this might be relatively easy to do.

jLinux

All the add_row() does is parse the mustache template, and add the row to the DataTable via row.add(), not that difficult. If you look closely, all it is is a bunch of Mustache.render() calls inside the row.add()