I'm trying to add a class name to dynatable generated <td>s, but I don't know how. I've tried this, but does not work:

<table id="my-final-table">
  <thead>
    <th>Band</th>
    <th>Song</th>
      <th style="display:none;" class="td-id">id</th>
  </thead>
  <tbody>
  </tbody>
</table>

I want to add td-id to the last <td>.

var jsondata=[
  {
    "band": "Weezer",
    "song": "El Scorcho",
      "id":1
  },
  {
    "band": "Chevelle",
    "song": "Family System",
      "id":2
  }
];

var processingComplete = function(){
    $('#my-final-table tr').on("click",function(){
        console.log($(this));
});
};
$('#my-final-table').dynatable({
  dataset: {
    records: jsondata
  }
}).bind('dynatable:afterProcess', processingComplete);

processingComplete();

But the row html is like this when I click on a row:

<td style="text-align: center;">Chevelle</td>
<td style="text-align: center;">Family System</td>
<td style="display: none;text-align: start;">2</td>

JSFiddle: http://jsfiddle.net/maysamsh/pDVvx/5/

I realize the demo omits this, but we aren't able to get this to work properly. Pagination seems to be broken and we are unable to navigate pages. Not sure how people are using dynatables, but we'd love to use it as an ajax replacement for Datatables.

$('#homes-table').dynatable({
  features: {
    paginate: true
  },
  dataset: {
    ajax: true,
    ajaxUrl: '<%= homes_path %>',
    ajaxOnLoad: true,
    records: []
  },
  params: {
    sorts: 'order',
    page: 'page',
    perPage: 'per_page',
    queryRecordCount: 'count',
    totalRecordCount: 'total_count'
  },
  table: {
    defaultColumnIdStyle: 'underscore'
  },
  inputs: {
    paginationClass: 'pagination',
    paginationActiveClass: 'active',
    paginationDisabledClass: 'disabled'
  }
});

Current JSON response

{
"records": [
  {
    "name": "1 Testing Ave",
    "customer": "<a href='/customers/2'>Eric Customer 2</a>",
    "development": "Inglewood",
    "actions": "<a class='btn btn-info btn-block btn-xs' href='/homes/4'>View</a>"
  },
],
"count": 10,
"total_count": 29
}

We only need to count the queryRecordCount once when page === 1. If we change to other pages this variable stay the same and doesn't need to be compute by the backend.

The best one would be to have a button 'last page' and never have to compute queryRecordCount.

I've managed to Dynatable into the SP2013 app I'm building and whilst the HTML table is being "Dynafied" I'm seeing all the records (252) and when I click the link to sort the column the data disappears.

Would this be something to do with how SP is bring back the data? I'm using JSOM to present the data.

Hi !

I'm using dynatable for my website and I just saw that the label "Search:" near the search field is not easily changeable.

So I create an option, just like you did at first, to modify the label.

I tested it just now and it's working great.

I hope it will fill your requirements.

Thank you for your work.

Added an input option to modify the "Search:" label near the search field.

Hi there.

I am experiencing a very odd problem trying to use Markup.js in my custom rowWriter. My code works fine when just returning a string ala.

return "<tr><td>" + record.ident + "</td><td>" + record.first_name + " " + record.last_name + "</td><td>" + record.open_incidents + " åpne saker</td><td><button data-id='" + record.id + "' class='process_button btn btn-success btn-xs'>Behandle</button></td></tr>";

Using the code above in a custom rowWriter, like this, https://gist.github.com/flexd/427ac875d96735f2711c

It looks like this,

But, if I use Markup.js to generate the HTML string using the commented out code in the gist above, it looks like this:

As you can see in the second screenshot, the row has now somehow ended up outside <tbody></tbody>

I am not sure why this happens, as you can see here https://gist.github.com/flexd/333768cabcb5f7462ae2 Both methods return proper HTML, the only difference is that the template is formatted to be readable.

Looking at the default rowWriter and the source code, I have not yet found out what may be causing this, but since Markup.js seems to return a perfectly good HTML string I believe the problem exists within dynatable at the moment, I may of course be wrong.

https://github.com/alfajango/jquery-dynatable/blob/master/jquery.dynatable.js#L373

I am on IRC for the next 4-5 hours today and a while during the day tomorrow (CET). :-)

If the AJAX JSON data is something like this how do i display the data in the table. Currently the AJAX example you have has a parent JSON identifier called records. How would you process the data without that parent.

[{"band": "Weezer","song": "El Scorcho"},
{"band": "Chevelle","song": "Family System"}]

I don't have links in my json but i would like each row in my table to have a href added to it.

Can anyone point me to an example of how this can be implimented please?

Thanks.

Hi !

I was wondering if there is an option to set the page number to 1 when the user is sorting the table.

I think that keeping the same page number when changing sort is quite confusing.

Thanks

In the documentation, it says

NOTE: We'll also need a readers._rowReader function to tell dynatable how to write the JSON records back to the page, but we'll get to that in the Render section.

I'm pretty sure that what was meant was

NOTE: We'll also need a writers._rowWriter function to tell dynatable how to write the JSON records back to the page, but we'll get to that in the Render section.

since this NOTE comes right after talking about the readers._rowReader, and it doesn't make sense to say "we'll also need what we just told you all about" and because the Render section introduces writers._rowWriter.

I didn't see a repo (or a branch) for the docs, so I'm posting the issue here. I hope that's not a problem.

I needed this to avoid having the original table flash up before Dynatable had finished working on it. e.g. with

#some-table {
   visibility: hidden;
}

#some-table.dynatable-loaded {
    visibility: visible;
}

but debating whether it deserves to be in the core or my own event handler instead.

This PR upgrades the dependency jQuery to 3.6.0 and resolve the following deprecation issues due to upgrading

• .error -> .on("error", handler)
• .bind -> .on
• .delegate -> .on
• .undelegate -> .off
• .isArray -> Array.isArray
• .trim(text) -> text.trim()

Is the website going to return or is there some documentation elsewhere.

I'm guessing it has been down for awhile as I couldn't see a google cache of it either.

Examples in homepage refer to a features.sorting property, but it's not in the code. I think it should be features.sort instead. Anyone else noticed this? Thanks

In our json array we have urls that link to specific pages. How can I add this links to a button in the table?

<table id="job-table" class="table table-bordered">
                        <thead>
                            <tr>
                                <th>title</th>
                                <th>absolute_url</th>
                                <th>jobLink</th>
                                <th>locationName</th>
                                <th>updated_at</th>
                                <th>id</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                    <script>
                        var $dataTable = $('#job-table');
                        $.getJSON('https://boards-api.greenhouse.io/v1/boards/oni/jobs', ({jobs}) => {
                            if (!jobs) return;
                            const flattenJobs = jobs.map(({title, absolute_url, location, updated_at, id}) => ({
                                title,
                                absolute_url,
                                updated_at,
                                locationName: location.name, 
                                id
                            }));

                            console.log(flattenJobs);
                            $dataTable.dynatable({
                                dataset:{
                                    records: flattenJobs
                                },
                                features: {
                                    paginate: true,
                                    recordCount: true,
                                    sorting: true,
                                    search: true,
                                }
                            });
                        });
                    </script>

Sample json

jobs: 
  0:  
absolute_url: "https://oni.bio/careers?gh_jid=4195285002"
internal_job_id: 4172877002
location:  
name: "Oxford"
metadata: []
id: 4195285002
updated_at: "2019-08-27T10:00:41-04:00"
requisition_id: null
title: "Account Manager"
1:  
absolute_url: "https://oni.bio/careers?gh_jid=4365372002"
internal_job_id: 4305685002
location: 
name: "Oxford"
metadata: []
id: 4365372002
updated_at: "2019-09-03T11:41:03-04:00"
requisition_id: null
title: "Backend Software Engineer (DevOps)"
2:  
absolute_url: "https://oni.bio/careers?gh_jid=4187013002"
internal_job_id: 4165585002
location:  
name: "Oxford"
metadata: []
id: 4187013002
updated_at: "2019-08-27T10:00:41-04:00"
requisition_id: null
title: "C++ Software Engineer"