I am fairly new to datatables but have found it to be awesome. I stumbled across the RowGroup functionality and it is great. I ultimately want to sort by the number of elements in each group but was playing around with different functionality and unable to get it to do what I want and looking for a little help. I tried to follow the example that was posted here but could use a little help. First of all I tried to strip it down to the basics so I got rid of collapsing stuff and a little more. My table is a list of pro tennis players that played in college. I have a regular table that just lists them in order (found on my website here) and I am creating another version grouped by college so you can see how many from each college are in the Top 1000 pros. The live test case for my attempt that is failing to group by college with sorting is located here (I sure hope that link persists as this is my first attempt using live.datatables.net). I would like to do 2 things:

1. Be able to sort the table by number of players per college. I'd honestly be ok if the user could sort nothing after that and maybe just add collapsing to it.
2. Just because I saw the example of sorting on grouped totals I wanted to learn and get it to work but it is not working. You will notice that I attempted to add a total Points per college but it is only showing the first row, not the total for the group. I'd like the group row to show the total for the group and then when you click on the Points header have it sort on Group Points not the individual rows.

There are a few things I don't understand that would be great if someone could explain as well.

1. What does the statement pointTotal = $.fn.dataTable.render.number( ',', '.', 0).display( pointTotal ); do? I feel like it must be saying that you take pointTotal and make it an object whose value is still the number represented by pointTotal but whose display characteristic is the format as indicated. Is that correct? I saw the docs for render.number but not for .display so not really sure what that does. I'd love to hear an explanation of that whole statement broken down to get a clear understanding.
2. As long as I have orderFixed in my options I don't think I can sort like I want on points, but when I take it out things go haywire and I have no idea why. Keep clicking Points and it does all kinds of weird stuff.

Any help greatly appreciated.

I am using the editor in standalone mode.
Everything works ok, but when I include a custom validator in any field as below, on submission the validator always seem to be run for that field even though I am editing a different field.

        Field::inst( 'grid' )
            ->validator( Validate::notEmpty() )
            ->validator( function ( $val, $data, $field, $host ) {
                return (validate_locator( $val )) ? true : 'Enter a 6 digit grid square. No hyphens. E.G QF56IF. 6 characters max';
            })

            ->setFormatter( function ( $val, $data ) {
                return strtoupper($val);
            }),

As title. I want to make my table show 10 rows each page, and heights of each row are same.

var dt=$("#tblData").DataTable({
    scrollY : "calc(100% - 100px)"
    ,scroller:{
        rowHeight:55;
    }
    ,paging: true
});

I had 14 rows to show,and if I set my DataTable as above,all of them have same row height, but all of them shown inside a page. But if I use the settings below, I can see my result into 2 pages but 4 rows in 2nd page has more row height.

var dt=$("#tblData").DataTable({
    scrollY : "calc(100% - 100px)"
    ,paging: true
});

How could I have paging effect and make same row heights for each row?

Hello i have a little problem here, when i want to edit or delete my data on next page but my buttons is doesnt work, i just use datatables and modal, but this is very weird because i can edit and delete my data on the first page that just show 10 data.

Here for my script :

<script type="text/javascript">
            $(document).ready(function(){
                    $('.delete').on('click',function(){
                    $('#mytable').DataTable();
                    var userid=$(this).data('userid');
                    $('#ModalDelete').modal('show');
                    $('[name="kode"]').val(userid);
                });
            });
</script>

and here for my modal pop up :

    <form id="add-row-form" action="<?php echo base_url().'backend/clients/delete'?>" method="post" enctype="multipart/form-data">
    <div class="modal fade" id="ModalDelete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Delete Clients</h4>
                </div>
                <div class="modal-body">
                        <strong>Anda yakin mau menghapus client ini?</strong>
                        <div class="form-group">
                            <input type="hidden" id="txt_kode" name="kode" class="form-control" required>
                        </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button type="submit" id="add-row" class="btn btn-danger">Delete</button>
                </div>
            </div>
        </div>
    </div>
    </form>

Hi, I am new to datatables and now currently doing the search function.
Datatables's search will point to the search result and hide the other row.
How can I make the search point to the search result but still containing other line?

I have this code updating a single row when receiving an event from server:

var rowId = $('#episodes').DataTable().row('#row_' + event_json.episode);
if (rowId.length) {
    $.ajax({
        url: "{{ url_for('api.episodes') }}?seriesid=" + event_json.series + "&episodeid=" + event_json.episode,
        success: function (data) {
            if (data.data.length) {
                $('#episodes').DataTable().row(rowId).data(data.data[0]);
            }
        }
    })
}

It works perfectly well when responsiveness isn't required but as soon as a child row is created in responsive mode, this child row isn't updated at the same time as the row.

Is there something I can do to get it updated at the same time?

Thanks!

I've a editable data table configured to submit on blur. This works perfectly for any data except the original value for cell.
I'm using the onPreSubmit event and to do other calculation and canceling the submit.For actual submit to server I've separate button for it.

Example:
Suppose I've a cell in a table that has a value 9. Everything works fine when I set value 10. But after setting this value to 10 or any other value it does not let me set back to 9.

Has anyone faced the same issue?

The datatable contains child rows.
The table's data should refresh after 5 seconds, but, as soon as the page refreshes, the rows that are in row.show() state revert back to their hidden state. I want to refresh the table values such that the state of the table is maintained. Django is used for backend which is reading the data from a mysql database.

{% extends "tableviewer/base.html" %}
{% block content1 %}
<!-- head section -->

<style>

  @import url('//cdn.datatables.net/1.10.2/css/jquery.dataTables.css');
   td.details-control {
      background: url('http://www.datatables.net/examples/resources/details_open.png') no-repeat center center;
      cursor: pointer;
  }
  tr.shown td.details-control {
      background: url('http://www.datatables.net/examples/resources/details_close.png') no-repeat center center;
  }
</style>

{%endblock%}

{% block content %}
<!-- body section -->
<!-- <button type="button" class="refresh">Reset Table</button> -->

  <table id = "table1">
      <thead class = "thead">
      <tr>
        <th></th>
          <th>
              AUTHOR ID</th>
          <th>AUTHOR NAME</th>
          <th>Article</th>
          <th>Random Values</th>
      </tr>
      </thead>
       <tbody>
          {% for aob in obj %}
          <tr data-child-value="abcd">
            <td class="details-control"></td>
                  <td>{{aob.authId}}</td>
                  <td>{{aob.authName}}</td>
                  <td>{{aob.article}}</td>
                  <td><font color = {{color}}>{{random_nos}}</font></td>
                  <!-- <td><font color = {{color}}><div id = "autochange">{{random_nos}}</div></font></td> -->
                  <!-- <td id = "autochange"><font color = {{color}}>{{random_nos}}</font></td> -->
              </tr>

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

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>


<script type="text/javascript">
  function format(value) {
      reVal = '<div>Hidden Value: ' + value + '</div>';
        return reVal;
    }
    $(document).ready(function () {
        var table = $('#table1').DataTable({});

        // Add event listener for opening and closing details
        $('#table1').on('click', 'td.details-control', function () {
            var tr = $(this).closest('tr');
            var row = table.row(tr);

            if (row.child.isShown()) {
              //alert("inside isShown == True");
                // This row is already open - close it
                row.child.hide();
                tr.removeClass('shown');
            } else {
              //alert("inside isShown == False");
                // Open this row
                row.child(format(tr.data("data-child-value"))).show();
                tr.addClass('shown');
            }
        });
    });

</script>



{% endblock %}

how to server path and table data of txt file adding both on ajax function

Hi,

What is the best way to disable/enable sorting of columns after init?
I think we can use jQuery to remove icons sorting on the header and prevent clicking!
Then to enable these, we have to add them back.
But I would like know if we have any options, method or plugin to do that instead of?

Thanks,
Lam

I have a scrolling table with 25 columns. The first 5 are fixed. I am initializing the tooltips with drawCallback.

When scrolling the remaining 20 columns, the tooltips for the fixed 5 also scroll left rather than staying over the TD on which they should be initialized. I understand that the fixedColumns plugin uses a cloned table, so I attempted to namespace the initialization to the cloned table, but that did not work (no tooltips initialized).

I have attached a test page which demos the problem. You'll notice that if you scroll the table and then hover any of the fixed columns, their tooltips are no longer over the correct columns. The tooltips are only in the correct position when the table is not scrolled.

Following instructions for Simple Server Side processing here: https://datatables.net/examples/server_side/simple.html

I was able to get the database content displaying in the table. The one difference in what I need is that I need to have in the last column in the table a custom button. How do I get the data pulled formatted in the cell into a button. Client Side I would do:

<td><a href="link_page.php?id=$val[0]">Details</a></td>

but with server side (using because I have 500K records) I don't know how to insert the custom button code with the database entry in it.

Anyone know how I can do this using the DataTables provided ssp.class.php script from the link for simple server side processing?

Javascript

$('#grid').DataTable({
"processing": true,
"destroy": true,
"scrollY": true,
"scrollX": true,
"serverSide": true,
"paging": true,
"pageLength": 20,
"lengthChange": false,
"language": { search: '', searchPlaceholder: "Search..." },

    "ajax":
    {
        "url":'api/Default/EmployeeDetails',
        "contentType": "application/json",
        "type": 'POST',
        "dataType": "json",
        "data": function (d) {
            debugger;
            return JSON.stringify(d);
        },
        "dataSrc": function (json) {
            debugger;
            //json.draw = json.draw;
            //json.recordsTotal = json.recordsTotal;
            //json.recordsFiltered = json.recordsFiltered;
            //json.data = json.data;

            var return_data = json;
            //return return_data.data;
            var dttt = $.parseJSON(return_data.data);
            return dttt;
        }
    },
    "columns": [
        {
            "data": "UserName",
            "title": "Employee Name"
        },
        {
            "data": "Password",
            "title": "Passwords"
        }, ] 

HTML

Server side
[HttpPost("EmployeeDetails")]
public string EmployeeDetails([FromBody] PagingParams data)
{
SQLServerConnect connection = new SQLServerConnect();
string result = JsonConvert.SerializeObject(connection.EmployeeDetails("Employee", data));
return result;
}

I am unable to hit the service call. Ajax call not initializing. There is no error in console also.

Hi

I have a container for a set of custom buttons drawn in the dataTables initialisation using a div like:- dom: "<'#sds-btns.col'f>" sort of scenario.

A set of buttons are prepared using PHP to decide which buttons are appropriate for the table in use. An example of the button preparation is:-

$sdsButtons = '';
            // SDS BUTTONS
            // $obj['show_upload_button'] = true or false
            if ($obj['show_upload_button'])
            {
                $sdsButtons .= "{ name: 'upload', className: 'btn btn-sm btn-outline-blue px-2', text: '" . Text::get('BUTTON_TEXT_UPLOAD') . "', titleAttr: '" . Text::get('LINK_TITLE_UPLOAD_FILE') . "', action: function () {
                    $('#id-upload').modal('show');
                                        }
                                        },";

            }

Any custom buttons that were created are then added to the container with:-

                var sdsB = new $.fn.dataTable.Buttons( tbl, 
                    {
                        buttons:[" . $sdsButtons . "]
                    });

                sdsB.container().appendTo( '#sds-btns' );

Everything works perfectly well, No issues, all is good.

However, if I add stateSave: true to the table initialisation then the buttons are not added to the DOM despite there being no errors and the code executing seemingly normally.

So, I added stateSaveParams before I save the state using stateSaveCallback() function:-

stateSaveParams: function (settings, ssData) { ssData.buttons = [" . $sdsButtons . "] },
The buttons and everything else gets saved to my database as a JSON string like:-

"buttons":[{"attr":{"id":"add-new-tbl_crm"},"name":"new","className":"btn btn-sm btn-outline-blue px-2","text":"Create New","titleAttr":"Create New","action":""},{"attr":{"id":"btn-slideout","type":"button","aria-pressed":"true","data-toggle":"button"},"className":"btn btn-sm btn-outline-blue px-2 active","name":"slideout","text":"<i class='fas fa-filter fa-fw'><\/i>","titleAttr":"Apply Filter"}]

But, immediatley following the save, the 'new' button fires as though it has been clicked and the 'action' on that button is carried out!

2 questions arise from this.

Why does the 'new' button (id='add-new-tbl_crm') fire?
How do I load the button info back in the stateLoadParams(see below) function before stateLoadCallback is called

stateLoadParams: function (settings, ssData) { // I don't know what to do here ??????? = ssData.buttons; },

Hi,
I've search and the forum quite a bit and could not find out how to display a url contains & characters, they seems to be encoded all the time but need help to display it as they are.

I've tried with entityDecode and escape() but no luck.

Here is a minimal example if someone know the solution.

https://jsfiddle.net/zdn8tmvx/

The url to display inside the cell is:

http://example.com/?amount=1&currency=USD

Hi

I have added a checkbox with the prepend method to an editir form. what is the correct syntax for grabing the click event. Tried these but they won't work:

         $('input:checkbox').on('click', function () {
             alert('aaa');
         });

        $("#chkDoNotInsertDistributorPOSCommission").click(function () {
             alert('aaa');
        })

I tried looking on the forum but couldn't find anything. Thanks.

Hi everyone.

I applied the Datable Plugin when receive the excel file because there ware some problems with the existing excel export method.

All the pages could not be changed, so i tried to make a pop-up form and apply Datatable Plugin and call this on each page.

Successfully drawing tables and buttons in pop-up windows and using a table.buttons().trigger() to automatically select the export button on screen calls and The Excel file was successfully received, but a pop-up window remains.

So I tried to close it automatically after receiving it, but it didn't work.

How do I get events after 'Save As'?

I need to make the width of an editor list wider or wrap the contents of the list. How do I do this?

Hi Team,

When i try to print data table which has few rows IE11 printing one extra blank page with just header and footer.
Print is working fine in Crome.

Please help me resolve this issue.

Hello
When I set width for a column datatable using
<th style="width: 120px">Code</th>
and set up the datatable with scroll

scrollY: (screen.height - 435) + 'px',
scrollX: true,

I will have a problem with misalign between header and content.
Do you have an example of a correct way to set a column width for jquery datatable with scroll Y?

Thank you