Dear All,

I have Column Name , And the input filter drop-down for this column is having duplicate values with no proper sort.
Jquery Data table is initially considering Value which is starting with CAPS (Upper Case) and then Lower case letters as shows below for all the columns.

Can any one please help me in knowing how can I solve it fiddle

Hello All

Issue is : We are using fixed column in our data Table . whenever we tried to filter any values, internally some style has been added and changed the height of colum. After filtering,table is not resized .

If I removed the fixed column its works fine .

var oTable = $("#hfLibTable").DataTable({
  // This dom setting moves the "showing n entries" row before the
  // search box, and adds Buttons for save, copy, and print
  "dom": "Britp",
  buttons: [{
      extend: 'excel',
      text: "Save to xls",
      "filename": filename,
      exportOptions: {
        columns: [':visible']
      }
    },
    {
      extend: 'csv',
      text: "Save to csv",
      "filename": filename,
      exportOptions: {
        columns: [':visible']
      }
    },
    {
      extend: 'copy',
      text: "Copy to clipboard",
      exportOptions: {
        columns: [':visible']
      }
    },
    {
      extend: 'print',
      text: "Print",
      exportOptions: {
        columns: [':visible']
      }
    }
  ],
  "scrollY": "400px",
  "scrollX": "100%",
  "scrollCollapse": true,
  "paging": false,
  "fixedColumns": true,
  "order": [
    [0, 'desc']
  ],
  // Default descending sort on column 0.
  //"order": [[0,'desc']],
  // num-html is a special numeric sort after stripping off html from
  // the column. It requires the datatables.numericHtml.js plug-in.
  // NOTE: if you add any columns here, go up and change the index used in the
  // filterver change function above.
  "columns": [{
      "orderData": [1]
    }, //id
    {
      "visible": false
    }, //invisible id for export
    {}, //state
    {}, //owner
    {}, //qa
    {}, //release date
    {}, //to qa date
    {}, //qa est completion date
    {
      "type": "natural"
    }, //supersedes
    {
      "type": "natural"
    }, //vdp version
    {}, //product
    {}, //required
    {
      "type": "natural"
    }, //includes required
    {}, //bug #
    {}, //bug type
    {}, //component
    {}, //customers
    {
      "orderable": false
    }, //use and notes
    {
      "orderable": false
    }, //download link
    {}, //released in
    {}, //install with
    {} //same as
  ]
});

Plain text
1
2
3
4

$('.search_init').on('keyup change', function() {
 console.log("this is keyup change");
  oTable.column($(this).data('thindex')).search(this.value).draw();
} );

I subscribed an array to add/delete events, so that the data table mirrors the operations visually.
The events trigger as expected, when I add/remove an item on the array, the code executes but the rows remain.

Example:

self.arrayItems.subscribe(function (changes) {
        for (var i = 0; i < changes.length; i++) {
            var item = changes[i];
            switch (item.status) {
                case "deleted":
                    var rowIdx = dt.column(1).data().indexOf(item.value.Id);
                    dt.row(rowIdx).remove();
                    break;
                case "added":
                    dt.row.add(item.value);
                    break;
            }
        }
        dt.draw(); // calling draw after for-loop
    }, null, "arrayChange");

Note: the "Add" function seems to work - on load, I get all items in the table and it shows up great, but they never get removed... I tried calling draw at the individual operation (i.e. dt.row(rowIdx).remove().draw(); and also tried to call invalidate().draw(); but no changes... also I tried to call dt.rows().invalidate().draw(); at the end of the for-loop with no luck.

Through debugging I verified that 'rowIdx' is in fact the row index I wish to remove, and dt.row(rowIdx).data() is the object being removed. Still the row remains after draw/redraw.

The workaround I found is to call dt.clear().draw() to completely remove all table rows, but then I have to re-load them all back in - I just want to remove one single row, and if I clear the array, it should be removing all the items through the delete change event - there's something I'm doing wrong here and I can't figure out why the rows aren't being removed.

Hello,

When i resize the browser window, the columns fit as well the resized window, but the header not, there is an offset off the header.
If i refresh (F5) the browser the header are fitting nicely.
(tested Chrome and IE)

Any idea why this offset ?

I am populating a standalone editor from ajax which returns the data for advisorId:

editor.edit(ID, false).set('est.AdvisorID', advisorId).buttons({label: "Save", ...}).open();

This field is a select input and the keys:values come from options in the datasource.

Field::inst('est.AdvisorID')
                    ->options( Options::inst()
                        ->table('(SELECT ID, AdvisorFirstName, AdvisorLastName
                                FROM enrollment_advisors 
                                WHERE AdvisorArchived = 0) as T1')
                        ->value('T1.ID')
                        ->label(array('T1.AdvisorFirstName', 'T1.AdvisorLastName'))
                    )
                    ->setFormatter( 'Format::nullEmpty' )
                    ->getFormatter( 'Format::nullEmpty' ),

In a normal editor (that is attached to a table) this works fine, but for this standalone editor, is it possible to pass the key:value pairs from the options to the standalone editor field? If not, is there another way?

I have a table with one global search box, and 5 more search boxes for columns. Great tool. But now I would like the State column to be a drop down instead. then hide the state column. Here is my script so far.

<script type="text/javascript">
      function filterGlobal () {
    $('#mymatrixTable').DataTable().search(
        $('#global_filter').val(),
        // $('#global_regex').prop('checked'),
        $('#global_smart').prop('checked')
    ).draw();
}
 
function filterColumn ( i ) {
    $('#mymatrixTable').DataTable().column( i ).search(
        $('#col'+i+'_filter').val(),
        // $('#col'+i+'_regex').prop('checked'),
        $('#col'+i+'_smart').prop('checked')
    ).draw();
}
 
$(document).ready(function() {
    $('#mymatrixTable').DataTable( {
      responsive: true,
      dom: 'rtip',      
      "order": [[ 2, 'asc' ], [ 10, 'desc' ],[ 11, 'desc' ]]
    } );

     
 
    $('input.global_filter').on( 'keyup click', function () {
        filterGlobal();
    } );
 
    $('input.column_filter').on( 'keyup click', function () {
        filterColumn( $(this).parents('tr').attr('data-column') );
    } );
} );
    </script>

I am not sure where I found the example to create this.
Thanks in advance.

I've been trying out DataTables.net and I followed this example: https://www.npmjs.com/package/angular-4-data-table . Here you can see some code like :

<

div id="dataTableDiv" *ngIf="tableResource !== undefined;else waitingText">
<data-table id="eaditemsGrid"
headerTitle="EAD Process items"
[items]="items"
[itemCount]="itemCount"
(reload)="reloadItems($event)"

    (rowClick)="rowClick($event)"
    (rowDoubleClick)="rowDoubleClick($event)"
    [rowTooltip]="rowTooltip"
    >
    <data-table-column
        [property]="'id'"
        [header]="'id'"
        [sortable]="true"
        [resizable]="true"
        [width]="300">
    </data-table-column>
>>...  

As you can see "width" is a good property, but "height" not, also trying to change the height of the "tr" in my "dataTableDiv" via css doesn't seem to work... Does anyone have an idea of how I can change the height of each tr or row of data to my own value (like 150 px for example)?

debug code: uceval

Expected Identifier datatables.min.js line 30 char 12920
Expected Identifier datatables.js line 49394 char 4

IE 8.0.6001.18702

Is there a fix for this in the works? I did not find anything...

I'm apparently getting the wrong indexOf value when calling the following:

var index = table.column( 0 ).data().indexOf( 'key' );

The JSON results are returned in Descending order, so I added "order: [0, 'asc']" on the data table initiation.

When I go delete an object the index is reversed - in other words, if my data table has 10 items, I'm visually deleting the item at index 0 (first one i see) but the indexOf method returns index 9, so the bottom record is removed instead...

What can I do to properly use this IndexOf method to find/delete the right item? what if people sort/filter the table?

hello

please help
i want
1.highcharts
2 +
My datatables

http://live.datatables.net/foxunufe/1/edit?output

+++++

I am not a programmer and I do not know English

I want get all the ids in my check box coloumn when I click on. I've managed to get the total data row count, but I couldnt find a way to fetch all data of that coloumn with all pages. I'm using serverside processing

Below is my code

$(".check-all input[type=checkbox]").change(function() {

        if($(this).is(":checked")) {
            console.log(thisTable.page.info().recordsTotal);
            $('#userTable_info').append(' <a href="">Select all ' + thisTable.page.info().recordsTotal+'</a>');
            //this return only current page ??
            var data =  thisTable.search('').column(0).data();
            console.log(data);
        } 
    });

I have now spent almost 2 days trying to get this to work. I'm calling a .NET (MVC) API to retrieve the data, but I can't quite get DataTables to see the row data.

HTML:

JAVASCRIPT:

<

script type="text/javascript">

$(document).ready(function () {

  $('#example').DataTable({
     "processing": true,
     "serverSide": false,
     "ajax": {
        url: "@Url.Action("GetReport", "Reports")",
        type: 'POST',
        data: function (d) {
           return JSON.stringify(d);
        }
     },
     "columns": [
        { "data": "Column1" },
        { "data": "Column2" },
        { "data": "Column3" },
        { "data": "Column4" }
     ]
  });

});

C# server code:

  [HttpPost]
  public JsonResult GetReport(DataTableAjaxPostModel model)
  {
     String rc = "";
     int rows = 0;

     using (var command = db.Database.Connection.CreateCommand())
     {
        command.CommandText = "SELECT * FROM DHAPP_vwTest";
        command.CommandType = System.Data.CommandType.Text;
        if (command.Connection.State != ConnectionState.Open) { command.Connection.Open(); }
        using (var result = command.ExecuteReader())
        {
           StringBuilder sb = new StringBuilder();
           StringWriter sw = new StringWriter(sb);

           using (JsonWriter jsonWriter = new JsonTextWriter(sw))
           {
              jsonWriter.WriteStartArray();

              while (result.Read())
              {
                 rows++;
                 jsonWriter.WriteStartObject();
                 //jsonWriter.WriteStartArray();

                 int fields = result.FieldCount;

                 for (int i = 0; i < fields; i++)
                 {
                    jsonWriter.WritePropertyName(result.GetName(i));
                    jsonWriter.WriteValue(result[i]);
                 }

                 jsonWriter.WriteEndObject();
                 //jsonWriter.WriteEndArray();
              }

              jsonWriter.WriteEndArray();

              rc = sw.ToString();
           }
        }
     }

     JsonResult j = Json(new
     {
        // this is what datatables wants sending back
        draw = model.draw,
        recordsTotal = rows,
        recordsFiltered = rows,
        data = rc
     });

     return j;
  }

SQL Query DHAPP_vwTest:

SELECT 'Col 1' AS Column1, 'Col 2' AS Column2, 'Col 3' AS Column3, 'Col 4' AS Column4
UNION
SELECT 'Col 12' AS Column1, 'Col 2' AS Column2, 'Col 3' AS Column3, 'Col 4' AS Column4
UNION
SELECT 'Col 13' AS Column1, 'Col 2' AS Column2, 'Col 3' AS Column3, 'Col 4' AS Column4

Running this displays the javascript exception:

DataTables warning: table id=example - Requested unknown parameter 'Column1' for row 0, column 0. For more information about this error, please see http://datatables.net/tn/4

Debugger Output:

https://debug.datatables.net/icases

==========================================

I have tried all different combinations of dataSrc, but data for rows is just not "seen".

One thing I noticed is that the C# code escapes the double-quote characters - it uses \" instead of just ". So, I tried doing a Replace(@\,"") but still didn't work.

I tired trapping the retruned data by adding a dataSrc function:

$(document).ready(function () {

  $('#example').DataTable({
     "processing": true,
     "serverSide": false,
     "ajax": {
        url: "@Url.Action("GetReport", "Reports")",
        type: 'POST',
        data: function (d) {
           return JSON.stringify(d);
        },
        dataSrc: function (d2) {
           return d2;
        }
     },
     "columns": [
        { "data": "Column1" },
        { "data": "Column2" },
        { "data": "Column3" },
        { "data": "Column4" }
     ]
  });

});

I put a breakpoint in the javascript debugger and looked at d2 and it looks right. However, the DataTables debugger output seems top still have the escap characters in it, so maybe the is still the problem.

Here's an exact copy of the d2 variable in the javascripot Console:

data : "[{"Column1":"Col 1","Column2":"Col 2","Column3":"Col 3","Column4":"Col 4"},{"Column1":"Col 12","Column2":"Col 2","Column3":"Col 3","Column4":"Col 4"},{"Column1":"Col 13","Column2":"Col 2","Column3":"Col 3","Column4":"Col 4"}]"
draw : 0
recordsFiltered : 3
recordsTotal : 3

DataTables Debugger:
https://debug.datatables.net/otuwam

Sure looks like a valid JSON array of objects to me. Any ideas?

in above pic i have to use button for evevery row to inline edit and delete that particular row . how to i design by table

hello, everyone. I have a loading spinner, when I use "preDrawCallback" to make it "TRUE", it works fine, but when I want to make it "FALSE" in "preDrawCallback" I have to focus on some input field or change browser tab to make it false;

this is my code :

"preDrawCallback": function (settings) {
        console.log("SSSSSS =====>>>>> preDrawCallback");
        vm.loading = true;
},
"fnDrawCallback": function (oSettings) {
     // this log will show in console 
     console.log("EEEEEE =====>>>>> fnDrawCallback");
     // but this line note work immediately
     vm.loading = false;
},

how to make vm.loading "TRUE" immediately without a focus on elements !!!

Sorry if this has been asked before but my google fu did not help me today.

My DataTable has 100 columns but I mark 95 as visible: false this way my edit has all the data to do its job. But 50 rows from my server is 400kb (I am not yet using compression).

It would be nice to only ask for 4 columns and on initEdit fill up the data needed by DT to do the job. Are there any examples of doing this? I assume I will modify the $.fn.dataTable.Buttons edit button, and in the action I can get the selected rows and go ask for more columns and pass that to editor.edit()?

Hi everyone,

my DataTables data is coming from the Perl-script itself (which generates the html page), and it does pagination by default (with ?page=xx parameter) to reduce database load. The data is already in the DOM.

How can I initialize DataTables with:
- giving it the amount of total records
- adding the page parameter to the pagination so that click the page-link just loads the same page with another page parameter?

EDIT: I found https://datatables.net/examples/server_side/custom_vars.html, but this is not useable because the data is already in the DOM.

I guess that the search feature (over all data) will break at this point, but I don't care about that really much.

Many thanks!

I am wondering why EXPORT feature is not rendering HTML formatting? please check attachements 1 and 2

2.jpg : after print, looks like the HTML format is being skipped.

Please help!

Hey guys,
I've included the plugin based on this instruction:https://datatables.net/blog/2014-06-06, but the sorting and pagination icons are not shown. Is there anything wrong with my import order?

<link rel="stylesheet" href="{{ asset('css/app.css') }}">
<link href="{{ asset('sweetalert2/sweetalert2.min.css') }}" rel="stylesheet">
<script src="{{ asset('fontawesome/svg-with-js/js/fontawesome-all.min.js') }}"></script>
<link href="{{ asset('dataTables/css/jquery.dataTables.min.css') }}" rel="stylesheet">
<link href="{{ asset('dataTables/css/dataTables.bootstrap4.min.css') }}" rel="stylesheet">
<link href="{{ asset('dataTables/css/jquery.dataTables.fontawesome.css') }}" rel="stylesheet">
<link rel="stylesheet" href="{{ asset('css/mine.css') }}">
<link rel="stylesheet" href="{{ asset('css/lte-custom.css') }}">

Hello friends.

How can I send the "hidden" elements of type "input" in the rows that have been selected in a DataTable? In the example you get ALL the "input" but I just want to send those that are in selected rows.

I have a problem with datatable, because i want to hide some columns and make colspan with on other column. Can anyone help me?
The code is :

The empty columns '' are the ones i want to hide. The 3rd column i want to do colspan.