I am preparing an user management with datatable plugin.
It works fine.
However,I add the attribute data-order="0,1000" to the first column of the first row for keeping the "anonymous" row always on top.
When I click on the upper left hand corner "+" , I got a warning message in the .png file of attachment.
How can I fix the problem?
I attached a zip file for your reference.
All related files are stored in the zip file.

I have seen lots of discussion on trying to get datatables to present in a "card" or "panel" type view. I see there are lots of workarounds utilizing the various callbacks and events. I believe i have found the simplest method yet.

My method relies solely on CSS. Heres a few screen shots and a link to a sample page.
azguys.com/datatables/index.html

I have tested it out on Chrome and IE, they both seem agreeable to the CSS, no funny quirks. Give it a try and let me know what you think, and if it may have problems of other browsers.

Hi all,
i have data returned from server as follows :

{
    "data": [
        {
            "name": "SU",
            "description": "Super User",
            "company_id": "system",
            "objects": [
                {
                    "id": "jyD1-zqI",
                    "label": "register-object",
                    "type": "form",
                    "description": "form register object"
                },
                {
                    "id": "Eg6sZMhI",
                    "label": "register-company",
                    "type": "form",
                    "description": "form register company"
                },
                {
                    "id": "_jtptOH8",
                    "label": "register-scope",
                    "type": "form",
                    "description": "form register scope or role"
                },
                {
                    "id": "u-hcugkc",
                    "label": "autorization",
                    "type": "api",
                    "description": "/auth/autorize"
                },
                {
                    "id": "dxdcvSv8",
                    "label": "register-user",
                    "type": "form",
                    "description": "form register user"
                }
            ]
        },
        {
            "name": "SU",
            "description": "Super User",
            "company_id": "system",
            "objects": [
                {
                    "id": "jyD1-zqI",
                    "label": "register-object",
                    "type": "form",
                    "description": "form register object"
                },
                {
                    "id": "Eg6sZMhI",
                    "label": "register-company",
                    "type": "form",
                    "description": "form register company"
                },
                {
                    "id": "_jtptOH8",
                    "label": "register-scope",
                    "type": "form",
                    "description": "form register scope or role"
                },
                {
                    "id": "u-hcugkc",
                    "label": "autorization",
                    "type": "api",
                    "description": "/auth/autorize"
                },
                {
                    "id": "dxdcvSv8",
                    "label": "register-user",
                    "type": "form",
                    "description": "form register user"
                }
            ]
        }
    ]
}

How can i display it as Row details ?

Thanks ~
Best Regards,
FR

Hi there i am just wondering how could i make an datatable with mysql

this is my code for the datatable

https://jsfiddle.net/ofojzc4g/1/

if i can get some help with the mysql how to add it to database also with the tags for the datatable that would help me
thanks

Hello,
i try to work with Local table editing, without ajax.
My Table:

<table id="mvl" class="table table-bordered table-responsive table-hover">
            <thead>
                <tr>
                            <th>Hinweise</th>
                            <th>Make</th>
                            <th>Model</th>
                            <th>Platform</th>
                            <th>Type</th>
                            <th>Production Period</th>
                            <th>Engine</th>
                </tr>
            </thead>
            <tbody>
                    <tr id="row_1">
                            <td></td>
                            <td>VW</td>
                            <td>Transporter III Bus</td>
                            <td>--</td>
                            <td>1.6 TD</td>
                            <td>1984/08-1992/07</td>
                            <td>1589 ccm, 51 KW, 70 PS</td>
                    </tr>
                    <tr id="row_2">
                            <td></td>
                            <td>VW</td>
                            <td>Transporter III Kasten</td>
                            <td>--</td>
                            <td>1.6 TD</td>
                            <td>1984/10-1992/07</td>
                            <td>1589 ccm, 51 KW, 69 PS</td>
                    </tr>
                    <tr id="row_3">
                            <td></td>
                            <td>VW</td>
                            <td>Transporter III Pritsche/Fahrgestell</td>
                            <td>--</td>
                            <td>1.6 TD</td>
                            <td>1984/10-1992/07</td>
                            <td>1589 ccm, 51 KW, 70 PS</td>
                    </tr>
                    <tr id="row_4">
                            <td></td>
                            <td>VW</td>
                            <td>Transporter III Pritsche/Fahrgestell</td>
                            <td>--</td>
                            <td>1.6 TD Syncro</td>
                            <td>1986/03-1992/07</td>
                            <td>1589 ccm, 51 KW, 69 PS</td>
                    </tr>
            </tbody>
        </table>

included JS Files:

<script src="/Scripts/jquery-3.2.1.js"></script>
<script src="/Scripts/plugins/dataTables/datatables.min.js"></script>
<script src="/Scripts/plugins/dataTables/dataTables.responsive.min.js"></script>
<link href="/Content/plugins/dataTables/datatables.min.css" rel="stylesheet"/>
<link href="/Content/plugins/dataTables/responsive.bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.bootstrap.min.css" rel="stylesheet" />
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="/Scripts/dataTables.editor.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/select/1.2.4/js/dataTables.select.min.js"></script>
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/buttons/1.5.1/css/buttons.dataTables.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/select/1.2.4/css/select.dataTables.min.css" rel="stylesheet" />
<link href="/Content/editor.dataTables.min.css" rel="stylesheet" />

and my JS Code

<script type="text/javascript">
    var editor;

    $(document).ready(function () {
        editor = new $.fn.dataTable.Editor({
            table: "#mvl",
            fields: [{
                label: "Einschränkungen:",
                name: "Hinweise"
            },
            ]
        });

        $('#mvl').DataTable({
            "language": {
                "url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/German.json"
            },
            pageLength: 100,
            dom: 'Bfrtip',
            select: true,
            buttons: [
                { extend: 'remove', editor: editor },
                { extend: 'edit', editor: editor },
            ]
        });
    });
</script>

I want edit only first column, Is not working. No error message in console. Delete Button work fine.
Any Help for me ?

Thanks
Michael

Referencing https://datatables.net/forums/discussion/32883, I tried this implementation. I see (at least on Chrome) that if I use ESC, the popup is displayed twice, but Cancel does indeed bring user back to form to continue editing. If I close the form using the X in the upper right, however, the form closes whether I click OK or Cancel.

Is there something I'm doing wrong? I can set up test area for you again if needed.

In case there is some conflict specific to my processing, my full event handler setup is

// this must be done after datatables() is called in datatables.js
var openVals;
function afterdatatables(){
    editor.on( 'uploadXhrSuccess', function ( e, fieldName, json ) {
        console.log ('elev = ' + json.elev + ' distance = ' + json.distance);
        editor.field('elev').set(json.elev);
        editor.field('distance').set(json.distance);
        editor.field('active').set(json.active);
        editor.field('location').set(json.location);
    } );

    editor.on('initCreate', function() {
        editor.set('active', 1)
        editor.field('active').hide()
    });

    editor.on('initEdit', function() {
        var fileid = editor.get('fileid');
        editor.set('turns', 'Loading...')
        editor.field('active').show()
        $.ajax({
            // rr_turns_url_prefix comes from runningroute-*-config.js
            url: rr_turns_url_prefix + '/admin/' + fileid + '/turns',
            success : function(data) {
                editor.set('turns', data.turns)
            },
            error : function(jqXHR, textStatus, errorThrown) {
                editor.set('turns', 'ERROR: could not retrieve turn data\n'
                            + '   ' + errorThrown)
            },
        });

    });

    // confirm before closing window for unsaved changes
    // from https://datatables.net/forums/discussion/32883
    editor
        .on( 'open', function () {
            // Store the values of the fields on open
            openVals = JSON.stringify( editor.get() );
        } )
       .on( 'preClose', function ( e ) {
            // On close, check if the values have changed and ask for closing confirmation if they have
            if ( openVals !== JSON.stringify( editor.get() ) ) {
                return confirm( 'You have unsaved changes. Are you sure you want to exit?' );
            }
        } )
       .on( 'preBlur', function ( e ) {
            // On close, check if the values have changed and ask for closing confirmation if they have
            if ( openVals !== JSON.stringify( editor.get() ) ) {
                return confirm( 'You have unsaved changes. Are you sure you want to exit?' );
            }
    } );
};

Hi,
I'm using datatables 1.10.15, and I have an array of strings which I want to search on **two ** columns in the table.
The search has to be for an exact match.

For example, if my table consists of a "name" column and a "number" column, and I search the terms "Hell" and "1234", I want to be able to find them both (find "Hell" in the "name" column, but not "Hello", and find "1234" in the number column, but not "12345", and have a table drawn that combines both these searches)

I already combined all the array items with a pipe (|) for the regular expression, but how do I create an OR logic to combine the search results of two columns?

Thanks,
Avihai.

Hello Allan, Happy New Year
Wish a better year for you

I want to use where with condition

->select(
 'v_item_pr_po',
 ['item_code as value', 'item_name as label'],
 ['pr_no' => $_REQUEST['values']['prnumber'] ) **AND here**

I want to add q_po > 0
I tried some, but no luck, please advise

Regards,
Danny

I saw a reference to attr: { id: 'buttonID' } but it doesn't seem to work. Thanks. -Gabe

Hi, I want align the table RTL in the print page, by adding this code to the style
style="direction: rtl"
How can I do that ?

and this is my print button Code

{ extend: 'print',text: '<i class="fa fa-plus" aria-hidden="true"><span class="{{ App::isLocale('ar')? 'font-ar' : '' }}">@lang('master.print')</span></i>',
                        title: '@lang('invoices.products')',
                        messageTop: '{{ Auth::user()->office_name }}',
                        className: 'btn btn-default',
                        autoPrint: true,

                        customize: function (win) {
                            $(win.document.body).find('th').addClass('display').css('text-align', 'center');
                            $(win.document.body).find('table').addClass('display').css('font-size', '16px');
                            $(win.document.body).find('table').addClass('display').css('text-align', 'center');
                            $(win.document.body).find('tr:nth-child(odd) td').each(function (index) {
                                $(this).css('background-color', '#D0D0D0');
                            });
                            $(win.document.body).find('h1').css('text-align', 'center');

                        }}

I got a 10M entries table. Even with Server-side processing. It takes more than 30 seconds to show the Next page (10 entries). Any ideal why? any solutions?

Hello Allan,

I'm working with editor, server side, without table (in standalone mode) and with submit option = 'changed'.
When I try to use the set() method programmatically on a field, it sometimes doesn't trigger any ajax POST.

editor.edit('row_12',false);
editor.set('fieldName','value');
editor.submit();

See the use case I previously posted there : https://datatables.net/forums/discussion/37187 .

In this topic you explained to me that it was the expected behavior when using "changed" submit option, and suggested that I used "all' instead.

The problem is that I've got thousand fields on my standalone page, and I don't want all data transmitted when updating a single field ( firstly because that would result in user erasing data modified by other users, and secondly because it allows me to log server side which field has been updated by whom).

This issue with the set( fieldNames , value ) method is really annoying, and I'm constantly looking for alternatives but none of them are satisfying.

Wouldn't it be possible to add a parameter to the set method, (or maybe to the submit method) to allow the edit request to be sent when a field has been set programmatically. Is there another alternative that I haven't thought about.

Thank you for your time .

Julian

Hello,

I might be wrong but somewhere I saw feature for DataTables Editor AUTO-SAVE. When you type or change any fields, the form autosaves.

But I did not find it anyhere.

Was it removed? Or was it never there?

Peter

PS: I do not mean state saving https://datatables.net/examples/basic_init/state_save.html.

Here is the Ref:
https://jsfiddle.net/madhukarhebbar/dv83vr58/
I have 10+ columns targets where date conversion will happen for some of the rows during load.
How can I prevent the same during PDF or excel export?
I.e Column Target should not get called for Export.

Hi,
I'm using Datatables.net (for about 2.5 years now - great product) but I'm having an issue with server-side processing.
I need to enable server-side processing as a page on my client's site is taking 3.5 minutes to 4 minutes to load! It's not a particularly large table (6572 rows, each with several drop-down lists).
It's already getting json data via an ajax call and if I add the ServerSide: "true" parameter to the datatable in the javascript file, when I check Chrome developer tools, the ajax request is made on the first call and all the data is loaded. Clicking on the table pagination buttons does not make a subsequent ajax call, which I would have expected. Instead, no call is made and the table is still functioning completely client-side.
I've trawled through the server-side documentation on your site and I expected also to see some of the sent parameters e.g. draw, start, length etc but none were sent in the initial call.

Ultimately, I'm trying to make the ajax call for only the 10 records viewable in the current pagination.

My questions are
1. Is the ServerSide: "true" and ajax: properties the only ones required to enable server-side processing?
2. Why does my page still behave as client-side processing?
3. With server-side processing enabled, will each click of a pagination control send the appropriate parameters to the api?

If I can't get this to work, my options are to send the parameters myself and implement pagination without a full data-load, or use Cache-Cow for client and server-side caching.

The site is behind a login but if you need to access it to see what's happening better, I can arrange a test account for you.

Thanks,
Regards,
John

I have seen people asking a few times how to use datatables serverside with MVC and EF with paging sorting and searching etc. I had some code lying around so I thought its time to give back and share a simple implementation.

Unfortunately I don't have time right now to create a sample solution for download so I just hacked out the code and pasted it in here as a guide.

For the dynamic searching (where clause) you will need linqkit for the predicate building.

First map the datatable inbound JSON requests to classes

Start - JSon class sent from Datatables

public class DataTableAjaxPostModel
{
    // properties are not capital due to json mapping
    public int draw { get; set; }
    public int start { get; set; }
    public int length { get; set; }
    public List<Column> columns { get; set; }
    public Search search { get; set; }
    public List<Order> order { get; set; }
}

public class Column
{
    public string data { get; set; }
    public string name { get; set; }
    public bool searchable { get; set; }
    public bool orderable { get; set; }
    public Search search { get; set; }
}

public class Search
{
    public string value { get; set; }
    public string regex { get; set; }
}

public class Order
{
    public int column { get; set; }
    public string dir { get; set; }
}
/// End- JSon class sent from Datatables

Next implement your action in a standard controller (note in this example we are not using a Web-API controller)

This method just grabs the data sent from the table and calls YourCustomSearchFunc() before returning a formatted json obj for Datatables to consume.

public JsonResult CustomServerSideSearchAction(DataTableAjaxPostModel model)
{
    // action inside a standard controller
    int filteredResultsCount;
    int totalResultsCount;
    var res = YourCustomSearchFunc(model, out filteredResultsCount, out totalResultsCount);

    var result = new List<YourCustomSearchClass>(res.Count);
    foreach (var s in res)
    {
        // simple remapping adding extra info to found dataset
        result.Add(new YourCustomSearchClass
        {
            EmployerId = User.ClaimsUserId(),
            Id = s.Id,
            Pin = s.Pin,
            Firstname = s.Firstname,
            Lastname = s.Lastname,
            RegistrationStatusId = DoSomethingToGetIt(s.Id),
            Address3 = s.Address3,
            Address4 = s.Address4
        });
    };

    return Json(new
    {
        // this is what datatables wants sending back
        draw = model.draw,
        recordsTotal = totalResultsCount,
        recordsFiltered = filteredResultsCount,
        data = result
    });
}

YourCustomSearchFunc() is very simple it just sets up the sort column and sort direction before calling the database search functionality. In this example we are only allowing sorting on a single column but you could easily implement multi column sorting.

public IList<YourCustomSearchClass> YourCustomSearchFunc(DataTableAjaxPostModel model, out int filteredResultsCount, out int totalResultsCount)
{
    var searchBy = (model.search != null) ? model.search.value : null;
    var take = model.length;
    var skip = model.start;

    string sortBy = "";
    bool sortDir = true;

    if (model.order != null)
    {
        // in this example we just default sort on the 1st column
        sortBy = model.columns[model.order[0].column].data;
        sortDir = model.order[0].dir.ToLower() == "asc";
    }

    // search the dbase taking into consideration table sorting and paging
    var result = GetDataFromDbase(searchBy, take, skip, sortBy, sortDir, out filteredResultsCount, out totalResultsCount);
    if (result == null)
    {
        // empty collection...
        return new List<YourCustomSearchClass>();
    }
    return result;
}

This is the main meat of the functionality. In it we simply select from the dbase but instead of using a fixed where clause we use a dynamic expression built using the wonderful LinqKit to generate the predicate.

Additionally we use Take and Skip to allow us to page through the data. Notice we use the where clause twice. Once to select the data and pick a page, the second time to count how many items we could have returned.

public List<YourCustomSearchClass> GetDataFromDbase(string searchBy, int take, int skip, string sortBy, bool sortDir, out int filteredResultsCount, out int totalResultsCount)
{
    // the example datatable used is not supporting multi column ordering
    // so we only need get the column order from the first column passed to us.
    var whereClause = BuildDynamicWhereClause(Db, searchBy);

    if (String.IsNullOrEmpty(searchBy))
    {
        // if we have an empty search then just order the results by Id ascending
        sortBy = "Id";
        sortDir = true;
    }

    var result = Db.DatabaseTableEntity
                   .AsExpandable()
                   .Where(whereClause)
                   .Select(m => new YourCustomSearchClass
                   {
                       Id = m.Id,
                       Firstname = m.Firstname,
                       Lastname = m.Lastname,
                       Address1 = m.Address1,
                       Address2 = m.Address2,
                       Address3 = m.Address3,
                       Address4 = m.Address4,
                       Phone = m.Phone,
                       Postcode = m.Postcode,
                   })
                   .OrderBy(sortBy, sortDir) // have to give a default order when skipping .. so use the PK
                   .Skip(skip)
                   .Take(take)
                   .ToList();

    // now just get the count of items (without the skip and take) - eg how many could be returned with filtering
    filteredResultsCount = Db.DatabaseTableEntity.AsExpandable().Where(whereClause).Count();
    totalResultsCount = Db.DatabaseTableEntity.Count();

    return result;
}

Here is the predicate builder function that just plugs in a where clause dynamically. You will need to install (nugget) in linqkit for this.

In this example I am searching where the searchterm appears in either the firstname or lastname

private Expression<Func<DatabaseTableMappedClass, bool>> BuildDynamicWhereClause(DBEntities entities, string searchValue)
{
    // simple method to dynamically plugin a where clause
    var predicate = PredicateBuilder.New<DatabaseTableMappedClass>(true); // true -where(true) return all
    if (String.IsNullOrWhiteSpace(searchValue) == false)
    {
        // as we only have 2 cols allow the user type in name 'firstname lastname' then use the list to search the first and last name of dbase
        var searchTerms = searchValue.Split(' ').ToList().ConvertAll(x => x.ToLower());

        predicate = predicate.Or(s => searchTerms.Any(srch => s.Firstname.ToLower().Contains(srch)));
        predicate = predicate.Or(s => searchTerms.Any(srch => s.Lastname.ToLower().Contains(srch)));
    }
    return predicate;
}

The only left to show is the datatable itself

var table = $('#SearchResultTable').DataTable({
    "proccessing": true,
    "serverSide": true,
    "ajax": {
        url: "@Url.Action("CustomServerSideSearchAction", "Home")",
        type: 'POST'
    },
    "language": {
        "search": "",
        "searchPlaceholder": "Search..."
    },
   "columns": [
        { "data": "Firstname" },
        { "data": "Lastname" }
    ]
});

Hope this helps

Hi all,
I have a datatable on dialog and the Collection contain: Print, PDF,...
When I double-click the "Download" button, after that the dropdown can't show again.

Please help, thanks

angular1的框架中，添加数据后如何刷新表格？？table.ajax.reload()和table.api().ajax.reload()都不能用，初始化表格时用的是table.Datatable()

HI Allan,
Anything new regarding the ability to export complex headers?