datatables-1.10

I know that there has been many answers and tutorials about populating Jquery Datatables with data but I always get to the point of getting the following exception: Uncaught TypeError: Cannot read property 'length' of undefined I, being mainly a backend developer, have little to no experience with writing client so I would like to ask you about what I am doing wrong in the following example. I have a server running locally exposing an endpoint /destination which responds with a JSON string in this format: [{ "id": 1, "name": "London Heathrow", "lat": 51.470022, "lon": -0.454295 }, { "id": 2,

I am using DataTables to create a table that is able to dynamically filter context. I am following the basic example, here . However, I want to make one customisation: To display alphabetised results in my table, with a "title row" for each alphabet letter. Eg: A - Apple - Avocado B - Bear - Button C - Car I have done this successfully (using Django templating on the server side for the output), but the footer label Datatables shows by default is now incorrect, because it counts the title rows. In the above example it reads: Showing 1 to 8 of 8 entries When it should read: Showing 1 to 5 of 5

This is informational, in that I am posing the question and will provide the answer. It's for the record and to help anyone that follows me here. I build DataTables using RailsCasts 340. They worked great, but I had some struggles with it with column width versus table width and such. See Datatable rows extend past table boundary, or are too narrow . In general, it seemed to be a good idea to upgrade jquery-datatables-rails from 2.2.1 to 2.2.3 to get from DataTables 1.9 to 1.10. This also includes datatables-responsive 0.2.0. Referring to Converting parameter names for DataTables 1.10 , you'll

I want to show my dataTable export button in custom div . how can I Do this ? my Current code this is default code and buttons show seperatly on top of my table. how can I edit this? $(document).ready(function() { $('#example').DataTable( { dom: 'Bfrtip', buttons: [ 'excelHtml5', 'csvHtml5', ] } ); } ); where I want to display <select id="ex"> <option>Export </option> <option id="csv" >CSV</option> <option id="xls" >XLS</option> </select> here is the fiddle https://jsfiddle.net/qt9p2fwt/3/ It is quite a headache to clone the button events and destroy the elements. Why not just hide the buttons

I have a dataTable initialized with server side paging and it is working fine. This table triggers ajax, pulls data and renders onto the table during initialization. However I need empty table initially and load table data on click of a button using load() or reload() like: myTable.api().ajax.reload(); Here is my table initialization: function initTestTable(){ myTable = $('#testTable').dataTable({ "processing": true, "serverSide": true, "ajax": { "url": "testTableData.html", "type": "GET", }, "columns": [ { "data": "code" }, { "data": "description" } ] }); } There should be a way to restrict