Search

As always, we are keen to hear how you are using DataTables, Editor and SearchPanes. Please drop us a message in the forum with how you are getting on with our software, or if you have run into any problems, or have ideas for future enhancements. Enjoy!

While this is only a 1.0.0 release, there has been a large amount of work and testing over the last few months to ensure that SearchPanes is a strong extension which is ready for use in production environments. I hope that SearchPanes can bring some improvement to your projects and as always we would encourage you to provide any feedback that you may have on this initial release of SearchPanes in the forums, as well as any other features that you think would benefit the extension in the future!

As was the case with SearchPanes' initial release, server-side processing is not available in this 1.0.0 release either. We are going to be looking at adding this ability in future, also noting that SearchBuilder's speed is already a lot faster than SearchPanes' when handling large datasets on the client-side. While this is only a 1.0.0 release, there has been a large amount of work and testing over the last few months to ensure that SearchBuilder is a strong extension which is ready for use in production environments. I hope that SearchBuilder can bring some improvement to your projects and as always we would encourage you to provide any feedback that you may have on this initial release of SearchBuilder in the forums, as well as any other features that you think would benefit the extension in the future!

It is also possible to set the grouping automatically depending on which columns are being ordered, as is shown in the example below: var table = $('#MultiGrouping') .on('order.dt', function(e, ctx, order) { var api = new $.fn.DataTable.Api(this); var orderingArr = []; for (var i=0 ; i<order.length ; i++) { orderingArr.push(order[i].col); } api.rowGroup().dataSrc(orderingArr); }) .DataTable({ pageLength: 25, rowGroup: true }); {example-table #multiGrouping} Here we are making use of the rowGroup().dataSrc() API method. By placing it in a callback on the order, whenever a columns ordering is changed it will be called, allowing us to update the RowGrouping source asynchronously. Within the callback, all we are doing is extracting the columns where ordering is taking place from the data passed into the callback. We then convert these columns into a simple integer array, which in turn is passed into the rowGroup().dataSrc() API method. By using an array we allow for sub-grouping to occur when ordering over multiple columns. It is also worth noting how important it is to add the event listener before the DataTable itself. Doing it this way around allows for the initial ordering of the DataTable to be taken into account. If we inititalised the callback after the DataTable then your ordering and RowGrouping may not match.

When opening the camera for the first time on IOS sometimes the video does not play straight away and only the first frame is displayed. This can be fixed by editing the video tag to be <video autoplay muted id="video" controls="true"/>

Of course it is also possible to do some more processing with the data from the DataTable. The example below is creating a column graph, showing the average salaries of the employees in the example table, by office. And of course, here is a link to a live version. {example-table-thin #advanced} The code for this example is very similar to the previous examples, with a couple of tweaks to the extra function that we created. function getSalaries(table) { var salaryCounts = {}; var salary = {}; // Get the row indexes for the rows displayed under the current search var indexes = table.rows({ search: 'applied' }).indexes().toArray(); // For each row, extract the office and add the salary to the array for (var i = 0; i < indexes.length; i++) { var office = table.cell(indexes[i], 2).data(); if (salaryCounts[office] === undefined) { salaryCounts[office] = [ +table .cell(indexes[i], 3) .data() .replace(/[^0-9.]/g, ''), ]; } else { salaryCounts[office].push( +table .cell(indexes[i], 3) .data() .replace(/[^0-9.]/g, '') ); } } // Extract the office names that are present in the table var keys = Object.keys(salaryCounts); // For each office work out the average salary for (var i = 0; i < keys.length; i++) { var length = salaryCounts[keys[i]].length; var total = salaryCounts[keys[i]].reduce((a, b) => a + b, 0); salary[keys[i]] = total / length; } return salary; } Here we have 2 objects, the first salary object is going to hold the final data that we need for a column graph, while salaryCounts is a temporary object that will allow us to perform some extra processing. We also have to make a change to our series variable, the data is now the values of the salary array. We also need to declare an x and y axis. Putting all of this together gives us the following scipt, which is used for the example above. $(document).ready(function () { var table = $('#example').DataTable(); var salary = getSalaries(table); // Declare axis for the column graph var axis = { id: 'salary', min: 0, title: { text: 'Average Salary', }, }; // Declare inital series with the values from the getSalaries function var series = { name: 'Overall', data: Object.values(salary), }; var myChart = Highcharts.chart('container', { chart: { type: 'column', }, title: { text: 'Average Salary', }, xAxis: { categories: Object.keys(salary), }, yAxis: axis, series: [series], }); // On draw, get updated salaries and refresh axis and series table.on('draw', function () { salary = getSalaries(table); myChart.axes[0].categories = Object.keys(salary); myChart.series[0].setData(Object.values(salary)); }); }); function getSalaries(table) { var salaryCounts = {}; var salary = {}; // Get the row indexes for the rows displayed under the current search var indexes = table.rows({ search: 'applied' }).indexes().toArray(); // For each row, extract the office and add the salary to the array for (var i = 0; i < indexes.length; i++) { var office = table.cell(indexes[i], 2).data(); if (salaryCounts[office] === undefined) { salaryCounts[office] = [ +table .cell(indexes[i], 3) .data() .replace(/[^0-9.]/g, ''), ]; } else { salaryCounts[office].push( +table .cell(indexes[i], 3) .data() .replace(/[^0-9.]/g, '') ); } } // Extract the office names that are present in the table var keys = Object.keys(salaryCounts); // For each office work out the average salary for (var i = 0; i < keys.length; i++) { var length = salaryCounts[keys[i]].length; var total = salaryCounts[keys[i]].reduce((a, b) => a + b, 0); salary[keys[i]] = total / length; } return salary; } As I've mentioned, Highcharts offers a wide range of different graphs, and by making use of the DataTables API it is easy to create dynamic charts and graphs to run alongside a DataTable. Hopefully, this will help to add another dimension to your DataTables implementations.

While we have a lot of domain expertise in this area, CloudTables is a new product class for us, and we would warmly welcome any feedback you have - suggestions for improvements, or even just what you like / don't like about it. Please send feedback using this form or the Support option inside your CloudTables application. We hope you enjoy using our latest offering!

As always, improvements and suggestions very welcome! The code for this plug-in is hosted on GitHub. If you have any thoughts on improvements, please send a pull request, or open a new discussion in the forums. One shortcoming I'm particularly keen to address is full integration with Responsive. While Responsive will operate correctly with this plug-in enabled for the most part, child rows that are made visible will not be taken into account in the row count calculation causing vertical alignment problems. This will likely be addressed by introducing a new option to Responsive to show hidden information in a pop-up panel, rather than in a child row.

To my mind this is an epic release of DataTables, the cumulation of almost a year of long term planning and four months direct work on it. 12 individual pieces of software with 50k lines of code make up this release. It has been planned to be evolutionary from the point of view of yourself and the other developers using DataTables, but at the same time make a significant difference for developers new to DataTables and for new projects. There is still a lot of work planned, but before I turn to thinking about the next major release of DataTables I'll be taking stock with this release. Inevitably there will unfortunately be bugs to be fixed and I plan to introduce better browser / npm support, which will make up the majority of the planned work for the next few months. Enjoy!

This concludes the second in the three part series introducing Editor 1.5 - next up is the form submission options available in Editor 1.5.