Hello All,

Any Example for integrated Datatable in MVC5 ?

firt i was using an older datatable every thing was fine now i upgraded my datatable to 1.10.13 and i have some problem like it take longer time to load plus this problem that i have working on it for a day now and no solution first when i click over section as what i will show u in the pic a popup of a checkbox is created and the position of the popup is on top of section button but after i select a lot of checkbox the data table load more data but i limitede the scrollY of the datatable to stay compact but the popup calculated the real position and go to the bottom of the page any solution plzzz

We are using DataTables with the following libraries:

<script src="//code.jquery.com/jquery-1.12.3.js"></script>
<script src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/select/1.2.0/js/dataTables.select.min.js"></script>
<script src="//cdn.datatables.net/rowreorder/1.1.2/js/dataTables.rowReorder.min.js"></script>

And we have come across an issue, sometimes, when we use row reorder to drag and drop rows it will move some other rows to random places, as a fix, we found that using the following in the rowReorder options on the DataTables creation fixed this:

rowReorder: {
        selector: ".moveable",
        dataSrc: "order",
        update: false
},

But this in itself caused an issue, we have a "SaveOrder" function, that uses the table.data() function to get the desired info in the correct order, but because the update has not been fired, it is being sent to our API in the wrong order.

Is there any way to force an update on the data held within table.data in order to pass this in the correct format?

For reference, our SaveOrder looks like this:

jq.ajax({
        url: "index.php?our_api_references",
        type: "POST",
        data: {table_data: send_data},
        beforeSend: function () {
            $("#dataTable").find("tbody").html('<tr><td colspan="100" style="text-align: center">Saving order, please wait. This process can take a few minutes...</td><tr>');
        },
        success: function(data, status) {
            // console.log(data);
        },
        error: function(xhr, desc, err) {
            console.log(xhr);
            console.log("Desc: " + desc + "\nErr: " + err);
        },
        async: true
    });

    window.location.reload();
}

I am using the select-checkbox className for a checkbox column which generally works well. I allow the user to select one or more rows and remove the items from the table (by deleting the row(s) in the database and refreshing the table). However, when attempting to check one of the remaining rows after refreshing, the checkboxes for the remaining items cannot be checked. I did a comparison of the html for the checkbox table cells and they both look the same (before and after removing/refreshing items from the table). Any ideas on how to troubleshoot this?

Thanks.
Tom

On 17 Jan 2017 I purchased the Medio support, what did that buy me?

Regards,
Jim

Hi all,
I have a large table and I would like to show only two columns by selecting them using two different dropdown menus.
How can I do this with datatables?
After displaying the two choosen columns I need to compare all values in the first column with the values in the second column, for every row. I should display a "no change" text in the second column when a match is found.
Can I do this with DataTables?
TIA
tony

Hi,

I have different categories in my table and I want to implement one search button to show two categories (of 5).

Actually I use this code:

{
                text: 'Purchased',
                action: function ( e, dt, node, config ) {
                    var table = $('#sites').DataTable();
                    table.columns( 1 ).search( "Purchased" ).draw();
                }
            },{
                text: 'Sold',
                action: function ( e, dt, node, config ) {
                    var table = $('#sites').DataTable();
                    table.columns( 1 ).search( "Sold" ).draw();
                }
            }

And I tried to change it into this (which doesn't work also with enabled regex):

{
                text: 'Purchased or Sold',
                action: function ( e, dt, node, config ) {
                    var table = $('#sites').DataTable();
                    table.columns( 1 ).search( "Purchased|Sold" ).draw();
                }
            }

Have anybody an idea to merge the to buttons without changing the categories?

Thanks in advance

Patrick

I'm importing the following into my page:

import 'jquery';
import '../../DataTables-1.10.11/js/jquery.dataTables';
import '../../JSZip-2.5.0/jszip';
import '../../Buttons-1.1.2/js/dataTables.buttons';
import '../../Buttons-1.1.2/js/buttons.html5';
import '../../Buttons-1.1.2/js/buttons.print';

and here is my table:

$('#a-table').DataTable({
            "buttons": [
                'copy', 'excel', 'pdf'
            ],
            "columns": [
                    // request_by
                { "width": "8%" },
                { "width": "8%" },
                { "width": "15%" },
                { "width": "8%" },
                { "width": "5%" },
                { "width": "15%" },
                { "width": "5%" },
                { "width": "36%" }

              ],
             buttons: true,
            "stateSave": false,
            "pageLength": -1,
            "data": this.tableArray,
            "oLanguage": {
                "sSearch": "Search table for: ",
                "sEmptyTable": "You haven't searched for anything yet."
              },
             "dom": 'Bfrtip'


        });

Instead of seeing copy, excel, and pdf butons, I'm seeing Copy, CSV, and Print. Any idea why?

Hello Team,

I am trying to update DataTables row data, there is a button on the row, when I click on it, it opens a pop up and I update the row with the updated data.

The row updates correctly, but when I SORT and then try to edit the row, it updates some different row in the table.

I am using the below code to update the data:
var table = $("#customerTable").DataTable();
var tableData = table.data();
tableData[$scope.SelectedRowIndex].CustomerId = selectedCustomerId;
tableData[$scope.SelectedRowIndex].CustomerName = selectedCustomerName;
table.row($scope.SelectedRowIndex).invalidate().draw();

I am using scroller with client side processing.

Any pointers would be helpful.

Regards,
Agraj

All of the features work when the Data is Raw HTML but the moment I use a For loop to extract data from the DB using Models the table is population perfectly but the above said features do not appear.

Below is my Code:

<head>
    <link rel = "stylesheet" href="http://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="http://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
    <script>
        $(document).ready(function(){
    $('#example').DataTable();
            });
    </script>
    <meta charset="UTF-8">
    <title>Test</title>
</head>

<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>

            </tr>
        </thead>

    <tbody>
            {% for obj in object_list %}
                <tr>
            <td>
                {{obj.title}}
            </td>
            <td>
                {{obj.title}}
            </td>
            <td>
                {{obj.title}}
            </td>

            </tr>
            {% endfor %}
    </tbody>

</table>

</body>
</html>

Hi Support,
Is there any way to check negative value or non-numeric character in any cell.

Regards.
Sunil

Hi All,

I'm using version 1.10.13 and am having some compatibility issues over column header alignment with horizontal scrolling enabled.

When I'm using Complex headers (rowspan and colspan) without nowrap style, my table is rendered correctly in FF and Chrome. But using in IE11 I get an alignment issue.

Here's my jsfiddle showing the problem:
https://jsfiddle.net/Redburn/k33bu0tc/

Please, help me to catchout my work.

Hi, I want to change the table name from the client side via an input form. How To post the input value to the server-side?

Client side:

var tid = $('#table_id').val();
$(document).ready(function() {

    var values = $(this).serialize();
    $('#tb-data').DataTable( {
        "processing": true,
        "serverSide": true,
        "ajax": "server_processing.php",
        "type": "POST",
     } );

} );

Server side:

// DB table to use $table = $_POST['table_id'];

Is that confirmed issue, or is it in my implementation only that the filter input fires twice. Once immediately on the first letter typed, and second time after the set delay time. I see that in few of my datatables implementations for version 1.10.10

hi!

i am developing a module for the awesome processwire cms for datatables: https://processwire.com/talk/topic/15524-preview-rockdatatables/

the principle is to populate all the columDefs BEFORE initializing the table because that way i can control most of it on the backend and modify only the needed columns by referencing them via their name and not via their index (this makes rearranging/removing/adding columns via the backend very easy).

i have a table that should render currency values as formatted locales, so i created a render function for this:

$(document).ready(function() {

    // setup variables
        var opt = ProcessWire.config.dt_kundenliste; // options from backend
        var colDefs = []; // column definitions

    // custom column definitions here
        colDefs.push({

---------------
            targets: 'euro', // does NOT work :(
            // [3,4,5] works
            // opt.colnames.indexOf('net2017'), works
---------------

            render: function ( data, type, full, meta ) {
                if(type === 'display') {
                    var num = parseFloat(data);
                    if(num) {
                        return num.toLocaleString('de-DE', {
                            /*style: 'currency',
                            currency: 'EUR',*/
                            minimumFractionDigits: 2
                        });
                    }
                }
                return data;
            },
        });

    // load default column definitions
        colDefs = colDefs.concat(dtGetDefaultDefs(opt));

    // initialise table
        $('#dt_kundenliste').DataTable({
            ajax: {
                url: './kundenliste/',
                type: 'post',
                data: function(d) {
                    d.year = $('#year').val();
                },
            },
            columnDefs: colDefs,
            /*scrollY: "400px",
            scrollCollapse: true,*/
            scrollX: "100%",
            pageLength: 10,
        });
});

the default coldefs are populated like this:

/**
 * get default options for columns
 * @param  {object} opt; options that are set via PHP
 * @return {array}
 */
var dtGetDefaultDefs = function(opt) {
    var defs = [];

    // loop over all columns
    var i;
    for(i=0; i<opt.cols.length; i++) {
        defs.push({
            targets: i,
            title: (opt.cols[i].title ? opt.cols[i].title : opt.cols[i].name),
            data: opt.cols[i].name,
            className: opt.cols[i].class,
        });
    }

    //console.log(defs);
    return defs;
}

the problem is that is does NOT work when using a classname to select. but the classname is defined properly (see screenshot).

am i doing anything wrong or is this a bug?
thank you for your help!!

Is it possible to change the color of search box, when clicked, from blue to black in datatables?

I'm using an API (which i dont have access to develop) and the API return results paginated by page number and quantity per page i read a lot of articles with server side pagination but dont find a way to implement it.

Can anyone give me a hand?

My Api return

public class PageRoot
{
     public List<Results> results { get; set; }
     public int currentPage { get; set; }
     public int perPage { get; set; }
     public int totalPages { get; set; }
}

and i want to paginate the list of results.

Just thought I would share this with others as this community has been very helpful to me. Basically this is a way to filter distinctly on any column. You right click a cell and click filter, and it filters by the value. Of course you can also right click and clear the filter. You need JQUERY and Bootstrap...we are using JQUERY 2.2.4 and Bootstrap 3.3.7. This is based loosely on the version here which instead uses JQUERY UI http://live.datatables.net/caderego/100/embed

First you need to add this to your index page:

        <ul id="contextMenu" class="dropdown-menu" role="menu" style="display:none" >
            <li><a tabindex="-1" id="filter">Filter</a></li>
            <li><a tabindex="-1" id="clearFilter">Clear Filter</a></li>
        </ul>

Then you will need to add this JS file:

var theID = 0;
var theIndex;
$(function () {
    (function ($, window) {
        $.fn.contextMenu = function (settings) {
            return this.each(function () {
                // Open context menu
                $(this).on("contextmenu", function (e) {
                    // return native menu if pressing control
                    if (e.ctrlKey) return;
                    //open menu
                    var $menu = $(settings.menuSelector)
                        .data("invokedOn", $(e.target))
                        .show()
                        .css({
                            position: "absolute",
                            left: getMenuPosition(e.clientX, 'width', 'scrollLeft'),
                            top: getMenuPosition(e.clientY, 'height', 'scrollTop')
                        })
                        .off('click')
                        .on('click', '#filter', function (e) {
                            $menu.hide();
                            theID = 0;
                            var $invokedOn = $menu.data("invokedOn");
                            theIndex = $invokedOn.index();
                            var $selectedMenu = $(e.target);
                            settings.menuSelected.call(this, $invokedOn, $selectedMenu)
                        })
                    .on('click', '#clearFilter', function (e) {
                        $menu.hide();
                        theID = 1;
                        var $invokedOn = $menu.data("invokedOn");
                        var $selectedMenu = $(e.target);
                        settings.menuSelected.call(this, $invokedOn, $selectedMenu)
                    });
                    return false;
                });
                //make sure menu closes on any click
                $('body').click(function () {
                    $(settings.menuSelector).hide();
                });
            });
            function getMenuPosition(mouse, direction, scrollDir) {
                var win = $(window)[direction](),
                    scroll = $(window)[scrollDir](),
                    menu = $(settings.menuSelector)[direction](),
                    position = mouse + scroll;
                // opening menu would pass the side of the page
                if (mouse + menu > win && menu < mouse)
                    position -= menu;
                return position;
            }
        };
    })(jQuery, window);
})
var table1 = "#yourtableid";
var table2 = "#yourtableid";
var table3 = "#yourtableid";
var table4 = "#yourtableid";
var table5 = "#yourtableid";
var theTables = [table1,table2,table3,table4,table5];
$.each(theTables, function (index, value) {
    var table = $(value).DataTable();
    $(value + " td").contextMenu({
        menuSelector: "#contextMenu",
        menuSelected: function (invokedOn, selectedMenu) {
            var msg = invokedOn.text();
            msg = msg.split(',').join('');
            switch (theID) {
                case 0:
                    table
                        .column(theIndex)
                        .search('^' + msg + '$', true)
                        .draw();
                    break;
                case 1:
                    table
                        .search('')
                        .columns().search('')
                        .draw();
                    break;
            }
        }
    });
});

What I want to achieve is a column toggle (have a set of available columns, and allow them to be toggled). The way I was attempting to achieve this was:

a) Build the DOM with all columns
b) Initialize the table with the columns that I want
c) Present the selection of columns to the user, and if they toggle columns repeat steps (a) and (b)

I know this isn't terribly efficient, but my table size is relatively small, and mostly it works well if savestate is not enabled.

If savestate is enabled, then the "visible" property of the column appears to be ignored.

This works, and hides the column(s), but doesn't save state:

$('#' + tableid).DataTable(
            {
                "columnDefs": [
                    {
                        "targets": [0],
                        "visible": true,
                        "searchable": false
                    },
                    {
                        "targets": [1, 2],
                        "visible": true,
                        "searchable": true
                    },
                    {
                        "targets": [3],
                        "visible": false,
                        "searchable": true
                    }
                ]
            }
        );

This saves state properly, but shows all columns:

$('#' + tableid).DataTable(
            {
                "columnDefs": [
                    {
                        "targets": [0],
                        "visible": true,
                        "searchable": false
                    },
                    {
                        "targets": [1, 2],
                        "visible": true,
                        "searchable": true
                    },
                    {
                        "targets": [3],
                        "visible": false,
                        "searchable": true
                    }
                ],
                stateSave: true
            }
        );
    };

To be honest, I would be OK with any of the following outcomes:

1) A widget that would allow me to toggle columns
2) A way of toggling columns on an initialized table, rather than destroying and re-creating (am I missing something in the docs?)
3) A complete hack that involves messing with the saved state

I really like to have state saved, since re-drawing columns isn't great user experience if they have made search or other selections, but I also need to be able to toggle columns, since I potentially have too many to comfortably fit on a page and some are only needed occasionally.

Thanks,

Dave

I've read something like that: "Ajax request made for every redraw" from this link - https://datatables.net/manual/data/#Data-source-types

I am using datatables with "server-side". I want use ajax request only for: paging, sorting or when I will change how many rows I want to show.

My silly question is: is it possible to "abort" or stop call ajax when I update the current row via this method: "fnUpdate(...)" ??

I should use this example: " https://datatables.net/examples/server_side/pipeline.html " or maybe existing other way to find the solution.

Any sugesstions ??