Hi im stuck in this problem for almost a week now i need help to create a server side pagination , sorting , filtering

ive done so many ways i found in internet but non work i already filter the data and its showing the problem is the pagination sorting and filtering

my table initialization
function testing3() {
$("#ModalSearchTable").dataTable().fnDestroy();
var searchVal = $("#ModalSearchValue").val();

    var table = $("#ModalSearchTable").dataTable({
        "searching": false,
        "dom": 'frtip',
        responsive: true,
        "oLanguage":
        {
            "oPaginate":
            {
                "sFirst": "<<",
                "sLast": ">>",
                "sNext": ">",
                "sPrevious": "<"
            },
            "sLengthMenu": "",
            "sZeroRecords": "No Records Found"
        },
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": '@Url.Action("GetSearchData", "BusinessCenters")',
        "fnServerData": function (sSource, aoData, fnCallback) {
            /* Add some data to send to the source, and send as 'POST' */
            aoData.push({ "name": "searchParam", "value": searchVal })
            $.ajax({
                "dataType": "JSON",
                "type": "GET",
                "url": sSource,
                "data": aoData,
                "success": fnCallback
            });
        },
        "columns": [
            { "data": "Id" ,
            "class": "hidden",
                "sTitle": "Id",
            },
            {
                "data": "Code",
                "sTitle": "Code",
            },
            {
                "data": "Name",
                "sTitle": "Name",
            }
        ]

    });
}

my jason request
public JsonResult GetSearchData(string searchParam)
{
var bussCtrs = db.BusinessCenters
.Where(x => searchParam == "*" || x.BussCtrCode.Contains(searchParam) || x.BussCtrName.Contains(searchParam))
.ToList()
.Select(x => new { Id = x.BussCtrId, Code = x.BussCtrCode, Name = x.BussCtrName });

        return Json(new { aaData = bussCtrs }, JsonRequestBehavior.AllowGet);
    }

While reordering if the server responded with an error the table was still updated.
@allan, to fix this I changed the datatables.rowReorder.js file.
Can you check my solution, and maybe add it to the official file?
You should first change the error checking for the response so that it will be the same with the rest of the datatable editor.

I moved the update to a new function and then changed the function _mouseUp in line 452. The 2 functions are below

    /**
     * Mouse up event handler - release the event handlers and perform the
     * table updates
     *
     * @param  {object} e Mouse event
     * @private
     */
    _mouseUp: function ( e )
    {
        var that = this;
        var dt = this.s.dt;
        var i, ien;
        var dataSrc = this.c.dataSrc;

        this.dom.clone.remove();
        this.dom.clone = null;

        this.dom.target.removeClass( 'dt-rowReorder-moving' );
        //this.dom.target = null;

        $(document).off( '.rowReorder' );
        $(document.body).removeClass( 'dt-rowReorder-noOverflow' );

        clearInterval( this.s.scrollInterval );
        this.s.scrollInterval = null;

        // Calculate the difference
        var startNodes = this.s.start.nodes;
        var endNodes = $.unique( dt.rows( { page: 'current' } ).nodes().toArray() );
        var idDiff = {};
        var fullDiff = [];
        var diffNodes = [];
        var getDataFn = this.s.getDataFn;
        var setDataFn = this.s.setDataFn;

        for ( i=0, ien=startNodes.length ; i<ien ; i++ ) {
            if ( startNodes[i] !== endNodes[i] ) {
                var id = dt.row( endNodes[i] ).id();
                var endRowData = dt.row( endNodes[i] ).data();
                var startRowData = dt.row( startNodes[i] ).data();

                if ( id ) {
                    idDiff[ id ] = getDataFn( startRowData );
                }

                fullDiff.push( {
                    node: endNodes[i],
                    oldData: getDataFn( endRowData ),
                    newData: getDataFn( startRowData ),
                    newPosition: i,
                    oldPosition: $.inArray( endNodes[i], startNodes )
                } );

                diffNodes.push( endNodes[i] );
            }
        }

        // Create event args
        var eventArgs = [ fullDiff, {
            dataSrc:    dataSrc,
            nodes:      diffNodes,
            values:     idDiff,
            triggerRow: dt.row( this.dom.target )
        } ];

        // Emit event
        this._emitEvent( 'row-reorder', eventArgs );

        // Editor interface
        if (this.c.editor) {
            // Disable user interaction while Editor is submitting
            this.c.enabled = false;

            this.c.editor
                .edit(
                    diffNodes,
                    false,
                    $.extend({submit: 'changed'}, this.c.formOptions)
                )
                .multiSet(dataSrc, idDiff)
                .one('submitComplete', function (event, response) {
                    that.c.enabled = true;
                    if (response && !($.isEmptyObject(response.error) && $.isEmptyObject(response.fieldErrors))) {
                        if (that.c.onError && typeof  that.c.onError === 'function') that.c.onError();
                        dt.draw(false);
                    } else {
                        // Do update if required and if successful update
                        that._updateIfRequired.call(that, fullDiff, dt, dataSrc, eventArgs);
                    }
                })
                .submit();
        } else {
            // Do update if required and if not using editor
            this._updateIfRequired.call(this, fullDiff, dt, dataSrc, eventArgs);
        }
    },

    _updateIfRequired: function (fullDiff, dt, dataSrc, eventArgs) {
        // Do update if required
        if (this.c.update) {
            for (var i = 0, ien = fullDiff.length; i < ien; i++) {
                var row = dt.row(fullDiff[i].node);
                var rowData = row.data();

                this.s.setDataFn(rowData, fullDiff[i].newData);

                // Invalidate the cell that has the same data source as the dataSrc
                (function (i) {
                    dt.columns().every(function () {
                        if (this.dataSrc() === dataSrc) {
                            dt.cell(fullDiff[i].node, this.index()).invalidate('data');
                        }
                    });
                })(i);
            }

            // Trigger row reordered event
            this._emitEvent('row-reordered', eventArgs);

            dt.draw(false);
        }
    },

The user can also add a function as a RowReorder option named onError, that will be called whenever an error occurs (i.e. to notify the user). You can init it like this for example

                rowReorder: {
                    dataSrc: 'ordering',
                    selector: '.reorder',
                    editor: editor,
                    onError: function () {
                        "use strict";
                        App.alert({
                            type: 'danger',
                            message: 'Error while changing the row ordering.',
                            close: true,
                            reset: false,
                            focus: true,
                            closeInSeconds: 10,
                            icon: 'warning'
                        });
                    }

What do you think? Is there something wrong with my solution (besides changing the library files )?

I have fully customized my table but without <thead> but now the datatables functions wont work , if i add the <thead> back it messes up my design but allows the functions to work, why is this?

Hello!

At the moment I'm attempting to add another column to my page. However, I will get an ajax error whenever I do. It's fine with 10 columns, but as soon as I add the 11th, the ajax error will appear.

Here's my debugger
http://debug.datatables.net/ewolon

And the console error shows:
responded with a status of 403 (Forbidden)

Hello,

I am trying to get a value from a dynamic table (datatables). I was reading. I think, have to use Cell() api, but I don't have anye idea how I can do it.

thanks

I have a DataTable i which I have created button in each row
onclick of that button the row data should be fetched in html form

Hi ,
I use the datatable "row grouping" function. Its works great !
I would like to add an "empty" row after each row group to have a more readable table. Is it possible ?

On the following code , can i add an empty row with a new <tr> ?

if ( last !== group ) {
$(rows).eq( i ).before(
'<tr class="group"><td colspan="5">'+group+'</td></tr>'
);

Thanks for your help!

Hello,
I use the row grouping datatable plugin. On the following script i have a background color for each new rows of the group
according to the name of the group category ( test, test1, test2 )

That s not what i want, I would like to add a background color directly on the row of the group.
ex : when the group name "test2" is deteted, i would like to add a background color on it.

Have you got an idea?
thank you

 api.column(3, {page:'current'} ).data().each( function ( group, i ) {
                if ( last !== group ) {
                    $(rows).eq( i ).before(
                            '<tr><td class="espace" colspan="5"></td></tr>',
                        '<tr class="group"><td colspan="5">'+group+'</td></tr>'
                    );

                    last = group;
                }

            } );

  "createdRow": function ( row, data, dataIndex )   {
            if ( data[3] == "test" ) {
                $(row).addClass('red');}

            if ( data[3] == "Test1" ) {
                $(row).addClass('yellow');}

            if ( data[3] == "Test2" ) {
                $(row).addClass('grey');}

Hi,
I want to add dynamic drop down list columns in jquery datatables
This 1,2,3,4 I given for demo purpose: Otherwise it maycome from 1 to 31 based on month and year, which user has chosen.
It is showing as No data in table

Code:
HTML

<table id="myGridAttendance" class="table compact" style="font-size:12px" width="100%">
    <thead>
        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
            <th>4</th>
        </tr>
    </thead>
</table>

Jquery

<script type="text/javascript">
    $(document).ready(function () {
        var month1 = $('#id_ddlMonth').val();
        var year1 = $('#id_ddlYear').val();
        var aryColTableChecked = ["1", "2", "3", "4"];

        var aryJSONColTable = [];

        for (var i = 0; i < aryColTableChecked.length; i++) {
            aryJSONColTable.push({
                "mData": aryColTableChecked[i],
                "aTargets": [i],
                "mRender": function (data, type, full) { return "'<select id=ddlAttandnce" + i + ">' + '<option value='0'>--Select--</option>' + '<option value='P'>Present</option>' + '<option value='A'>Absent</option>" }
            });
           // alert(aryJSONColTable[i]["mRender"]);
        };

        $('#myGridAttendance').DataTable({
            "ajax": {
                "url": '@Url.Action("GetAttendanceTable", "Messenger")',
                "dataSrc": "",
                "data": {
                    month: month1,
                    year: year1
                },
            },
            "columns": aryJSONColTable,
            "bDestroy": true
        });
    });
</script>

Please Help..

Hi I have a problem that since disturb me. I try to follow one of your examples by applying a database I have created.

But the following one appears after compilation : <b>Fatal error</b>: Class '    DataTables\Editor' not found in <b>C:\xampp\htdocs\luxeshop\categorie.php</b> on line <b>17</b><br />

Here is my php file.

<?php /* * Example PHP implementation used for the index.html example  */ // DataTables PHP library //include '../../php/DataTables.php'; // Alias Editor classes so they are easy to use include ("../../php/DataTables.php"); use     DataTables\Editor,     DataTables\Editor\Field,     DataTables\Editor\Format,     DataTables\Editor\Mjoin,     DataTables\Editor\Options,     DataTables\Editor\Upload,     DataTables\Editor\Validate; // Build our Editor instance and process the data coming from _POST Editor::inst( $db, 'categories' ) ->fields( Field::inst( 'id' ), Field::inst( 'categorie' )->validator('Validate::notEmpty' ), Field::inst( 'id_parent' )->validator('Validate::notEmpty' ) ) ->process( $_POST ) ->json();

and my html file

`
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/dataTables.bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="extensions/Buttons/css/buttons.bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="extensions/Select/css/select.bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="extensions/Editor/css/editor.bootstrap.min.css">

<style type="text/css" class="init">

</style>
<script type="text/javascript" language="javascript" src="js/jquery.js">
</script>
<script type="text/javascript" language="javascript" src="js/bootstrap.min.js">
</script>
<script type="text/javascript" language="javascript" src="js/jquery.dataTables.min.js">
</script>
<script type="text/javascript" language="javascript" src="js/dataTables.bootstrap.min.js">
</script>
<script type="text/javascript" language="javascript" src="extensions/Buttons/js/dataTables.buttons.min.js">
</script>
<script type="text/javascript" language="javascript" src="extensions/Buttons/js/buttons.bootstrap.min.js">
</script>
<script type="text/javascript" language="javascript" src="extensions/Select/js/dataTables.select.min.js">
</script>
<script type="text/javascript" language="javascript" src="extensions/Editor/js/dataTables.editor.min.js">
</script>
<script type="text/javascript" language="javascript" src="extensions/Editor/js/editor.bootstrap.min.js">
</script>

</head>
<body >
<div class="demo-html"></div>
<table id="tblcat" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>ID</th>
<th>Catégories</th>
<th>Parents</th>

                </tr>
            </thead>
            <tfoot>
                <tr>
                    <th>ID</th>
                    <th>Catégories</th>
                    <th>Parents</th>
                </tr>
            </tfoot>
        </table>

</body>
</html>`

Hello, everyone ?

https://datatables.net/extensions/buttons/examples/html5/simple.html

I implemented it using the link above.

"Input fields" not export?

I've debugged Chrome

//////////////////////////////////////////////////////////

//<td class=" grid_data_c">Test Export</td> <------export OK!
// <td class=" grid_data_c">
// <input type="text" name="export" readonly="readonly" class="no_border w20" value="Test Export">
// </td> <------export Fail...

//////////////////////////////////////////////////////////

dataTables.buttons.js

Line number 1559

if ( config.stripHtml ) {
str = str.replace( /^\s+|\s+$/g, '');
}

Make it empty here.....

If not, is there another way?

Hello, everyone ?

I found something strange in my work.

Let's see the picture.

This is Chrome
http://i.imgur.com/A8NSw18.png

This is IE11
http://i.imgur.com/DYN7u2l.png

"Chrome" has "Scroll" and "Header" size is right

But

"IE11" does not have "Scroll" and "Header" size does not

I will also show the js script source.

////////////////////////////////////////////////////////////////////////////
$("#masterTable").dataTable({
"autoWidth": true,
"autoHeight": true,
"destroy": true,
"data": data,
"scrollX" : true,
"scrollY" : "70%",
"scrollCollapse" : false,
"paging" : true,
"pagingType": "simple_numbers",
"info" : false,
"searching" : false,
"dom": '<"top"i>rt<"bottom"flp><"clear">',
"deferRender": true,
"lengthMenu": [[10, 20, 30], [10, 20, 30]],
"columnDefs" : [
{"orderable" : true, "targets" : 0 },
{"orderable" : false, "targets" : 1 },
{"orderable" : true, "targets" : 2 ,"orderDataType": "dom-text", type: 'string' },
{"orderable" : true, "targets" : 3 },
{"orderable" : true, "targets" : 4 ,"orderDataType": "dom-text", type: 'string' },
{"orderable" : true, "targets" : 5 },
{"orderable" : true, "targets" : 6 },
{"orderable" : true, "targets" : 7 },
{"orderable" : true, "targets" : 8 },
{"orderable" : true, "targets" : 9 ,"orderDataType": "dom-text", type: 'string' },
{"orderable" : true, "targets" : 10 },
{"orderable" : false, "targets" : 11},
{"orderable" : true, "targets" : 12 ,"orderDataType": "dom-text", type: 'string' },
{"orderable" : true, "targets" : 13 },
{"orderable" : true, "targets" : 14 },
{"orderable" : true, "targets" : 15 },
{"orderable" : true, "targets" : 16 }
],
"columns" : [
{ className : "grid_data_c"},
{ className : "grid_data_c"},
{ className : "grid_data_l"},
{ className : "grid_data_c"},
{ className : "grid_data_c"},
{ className : "grid_data_l"},
{ className : "grid_data_c"},
{ className : "grid_data_l"},
{ className : "grid_data_c"},
{ className : "grid_data_c"},
{ className : "grid_data_c"},
{ className : "grid_data_c"},
{ className : "grid_data_c"},
{ className : "grid_data_c"},
{ className : "grid_data_c", render:$.fn.dataTable.render.moment("YYYYMMDDHHmmss", "YYYY-MM-DD HH:mm:ss")},
{ className : "grid_data_c"},
{ className : "grid_data_c"}
],
"language" : {
"emptyTable" : "데이터가 존재하지 않습니다.",
"lengthMenu": " 최대 표시 줄 MENU ",
"paginate": {
"first": "맨처음",
"last": "마지막",
"next": "다음",
"previous": "이전"
}
},
"initComplete" : function(settings, json) {
},
"footerCallback": function () {
var api = this.api();
if(api.data().length > 0) {
$(api.column(0).footer()).html(api.data().length.money() + " 건");
}
}
});
////////////////////////////////////////////////////////////////////////////

What did I miss?

thank you for reading ^____^

var table = $('#reportFee').DataTable();
var tableTools = new $.fn.dataTable.TableTools( table);

$( tableTools.fnContainer() ).insertBefore('#reportFee_wrapper');

Im using yadcf 1.10 and im trying to do the following:

i have a multi_select filter above some Columns and i want that only those rows are shown, which DONT contain the selected values.

Example:

| col1 |

| apple |
| beer |
| plant |
| tree |
| meat |
| fish |
| tree/beer |
| meat/apple |

==> i select apple AND beer:

| col1 |

| plant |
| tree |
| meat |
| fish |
| tree/beer |
| meat/apple |

==> cleared search and now selecting tree AND beer AND meat AND fish:

| col1 |

| apple |
| plant |
| meat/apple |

How can i do this server-side?

How style this example, but using datatables.bootstrap.css?

The image attached shows my current result.

Severity: Notice

Message: Undefined variable: ids

Filename: Editor/Join.php

Line Number: 692

I need to insert data from an import file into the datatable. Sometimes it is only a data row but also several. When I inserted the data (Serverside) I see the inserted data only when I reload the whole page. How can I instruct Datatables to display the record immediately if it is in the visible range. The import always returns the record as JSON, but the datatable does not respond. I have read that it should go through AJAX load, however, I have no idea how. With the documentation I was also not smarter. How can I instruct datatables to display the record or reloading the part of the table without having to reload the whole page.

Andreas

I am using DataTable for my MVC project in view page I have following code

I have attached the table code image

I added both css and script file needed for DataTable. UI is coming perfectly but typing on search box and filtering not working.
I need to add any other code or where i made mistake kindly help....

When I view my datatable with complex headers on my LG v10 and S3 I can see still see the column header but the column data is gone. I have attached a screenshot.

I've already posted the code here: https://datatables.net/forums/discussion/40456/complex-headers-plus-sign-not-in-separate-column-solved?new=1

I changed the code: the details type --> inline

The problem arises when the width goes below 367px.

I am implementing the complex headers table using responsive plugin, but I get the following outcome:

The plus sign is in the name column, which is not desired, it should be in a new column before the name column.

Html is like in the example, but my js code is the following:

$('#tblComplexHeaders').DataTable({
    "sDom": "<'dt-toolbar'<'col-xs-12 col-sm-6'f><'col-sm-6 col-xs-12 hidden-xs'l>r>" +
    "t" +
    "<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-6'p>>",
    "oLanguage": {
        "sSearch": '<span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span>',
        sLengthMenu: "_MENU_"
    },
    responsive: {
        details: {
            type: 'column'
        }
    },
    columnDefs: [{
        className: 'control',
        orderable: false,
        targets: 0
    }],
    order: [1, 'asc']
});

The table looks good, only the plus sign is a problem.
I use the following plugins:

require(
[
    "jquery",
    "datatables.net",
    "datatables.net-bs",
    "datatables.net-responsive",
    "datatables.responsive.bootstrap",
    "datatables.responsive.helper",
    "datatables.net-buttons",
    "datatables-buttons.html5",
    "datatables.net-buttons-print",
    "datatables.net-buttons-colVis",
    "jszip", "pdfmake", "vfsfonts"
], function ($) {...

The function sets up different types of datatables, that's why I need the different plugins.
Any hint how to get the plus sign in a separate column before the "names" column?

The generated markup: