Okay, so a bit related to: https://datatables.net/forums/discussion/53996/add-filter-button-to-column-header-specific-column#latest

Tried to make a live datatables to display, but unsuccessful (hopefully it gives a understanding of what I want to achieve:
live.datatables.net/taqewezu/5/edit

See this picture for the problem:

The dropdown menu is behind the scrollBody div and only inside the scrollhead.

So I was tempted to to set the CSS:

.dataTables_scrollHead{
    overflow: visible !important;
}

However, when the scroll is active, this happens...:

The dropdown menu is showing, but due to overflowing, the scrollhead is not scrolling.

Anyone have any idea on how to solve this?

Hey there, so I have been looking at adding a button to filter the groups in a column, much like this:
https://datatables.net/examples/api/multi_filter_select.html
However, I want to add the button to the table column header (like where the sort button normally is). I have disabled sort for the column and then I was looking at this: https://datatables.net/reference/button/collection

I do have the Buttons JS included. Am I on the right track/any tips?
Mostly wonder what is the best way to include a custom button to the column header, as I am not 100% sure how to do this with the API.

I've been trying to incorporate the bootstrap tooltip into the editor field's label for an upload field so that the users can know what type of file to use. However I'm running into the issue of calling the tooltip method. I've tried placing the function is almost all places in the document. At this point I'm clueless as to where or how to call this function to get the tooltips turn on. This is the code for the editor.

[code]
editor = new $.fn.dataTable.Editor({
    ajax: '../models/user_adminCue_models.php',
    //dataType: 'json',
    table: '#users_cues',
    fields: [  {  label: "Cue Audio Upload  <i id = \"AudioTT\"data-toggle=\"tooltip\" title=\"Supported upload types: .mp3, .wav\" class=\"fas fa-info-alt\"></i><span class='red-text'>*</span>",
         name:  "users_cues.CueAudioURL",
         type:  "upload",
         clearText: 'Remove file',
         attr:{
           required: true
         },
         dragDrop: false,
                 display: function (val,row) {
                  return "<a href=\""+val.replace("..","../MAMRT")+"\">"+val.substring(val.indexOf("/",3)+1,val.length)+"</a>";
         }

      },
      { label: "Cue Image Upload <span class='red-text'>*</span><i id = \"ImageTT\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Supported upload types: .mp3, .wav\" class=\"fas fa-info-alt\"></i> ",
        name:  "users_cues.CueImageURL",

        type: "upload",
        clearText: 'Remove file',
        attr:{
          required: true
        },
        dragDrop: false,
                 display: function (val,row) {
                  return "<a href=\""+val.replace("..","../MAMRT")+"\">"+val.substring(val.indexOf("/",3)+1,val.length)+"</a>";
         }
      }
  ]
  });
[/code]

Can I able to get the current page number of the grid. Can I pass the page number into the browser URL?

i am try to load datatable in SharePoint, facing the issue. unable to load the datatable.

$('#mytbl').DataTable({
"pagingType": "full_numbers"
});

I am using latest js and css file references, but i am unable to resolve.

Error: Object doesn't support property or method 'DataTable'

Please help me.

I have installed and successfully activated the plugin but it is not showing on the WP left hand side bar. I am using not as Localhost but live on internet if that makes sense..... not sure of the correct term as new to WP.

Any pointers appreciated.

I want to synch my json params with data table params. please help me how can i fix it.

here is my code.
var table = $('#example').DataTable( {
serverSide: true,
processing: true,
pagingType: "full_numbers",
paging: true,
lengthMenu: [10, 25, 50, 75, 100],
ajax: {
url: 'http://localhost:8080/file/myjson.do',
dataFilter: function(data){
var json = jQuery.parseJSON( data );
//this is working fine
json.data = json.dataList;
json.recordsFiltered = json.AlldataList;
//
//the last 2 not working.
json.length = json.pageSize;
json.start =json.startIndex;
return JSON.stringify( json ); // return JSON strin
}
});

json response
dataList […]
AlldataList 3471
startIndex 0
pageSize 10

I have a datatable in which the data (from the database) is being filled with ajax, I also want a new tablerow with "Details" to show more details , but the table only allows data from the database.

I also read all documentation , but still no luck

              <table id="OrdrerList">
                    <thead>
                        <tr>

                            <th>Name</th>
                            <th>Details</th>

                        </tr>

                    </thead>
                    <tbody>
                    </tbody>
                </table>

    $('#OrdrerList').DataTable({

        "processing": true,
        "serverSide": true,

        ajax: {
            url: '@Url.Action("GetClosedRMA", "User")',
            dataType: 'json',
            contentType: 'application/json; charset=utf-8',
            data: 'dataSet'

        },
        columns: [

            { data: "Name" },
            { data: What should be here ? Details is just text and its not coming from database, 
             "render": function (data, type, full, meta) {
             return '<a href="/User/RMAClose?Name=' + full.Name+ '">some text</a>';
          } }
            
        ]
        "order": [0, "Asc"]

    });

I am looking for someone who can help me with that the data I have get into my datatable as dear inline format when I want to edit my dropdown box it has not chosen the one that was chosen the end I click on it hopes there someone who can help me.

I tried the demo version of Editable grid on the website. Can we have a dropdown list in the Editable grid?

I would like to add a button to to the datatable buttons called Email which when clicked would prompt for an email address and then call the pdf creation like the pdf button does and then do an ajax call to the server with the pdf. On the server I would save the pdf and then email it. I know how to do the server side, but need help with creating a custom button, adding a prompt for the email ( I can do the prompt, just need a function call) and then then code to create the pdf and send it via ajax.

I think this could be super useful and have seen several request for things like this, but this implementation to me makes the most sense. I am just way over my head with how datatables works to implement this.

I want to create an attendance register report that looks like this:

The information above the dates is the lesson for that day.

The JSON being returned to the jQuery is:

[{"attId":"120","cdId":"MTQ5","attMeeting":"A","attDate":"2019-01-11","cdSurname":"Achilles","cdFirstName":"Tendon","attDescription":"Cycling","attNewChum":"N"},{"cdId":"ODA=","cdSurname":"Alistair","cdFirstName":"Tricia","attDescription":"Running","attNewChum":"N"},{"cdId":"MTQ5","cdSurname":"Achilles","cdFirstName":"Tendon","attDescription":"Cycling","attNewChum":"N"},{"attId":"121","cdId":"ODA=","attMeeting":"P","attDate":"2019-01-12","cdSurname":"Alistair","cdFirstName":"Tricia","attNewChum":"N"},{"attId":"122","cdId":"MTQ5","attMeeting":"P","attDate":"2019-01-13","cdSurname":"Achilles","cdFirstName":"Tendon","attDescription":"Rowing","attNewChum":"N"},{"attId":"123","cdId":"ODA=","attMeeting":"P","attDate":"2019-01-13","cdSurname":"Alistair","cdFirstName":"Tricia","attDescription":"Rowing","attNewChum":"N"}]

The mySQL that extracts the data has a Left Join so all the names are extracted if there is a date (i.e., you can have a name followed by all columns having blanks).

Is it possible to do this?

Kind regards,

Glyn

I have my project in this way : https://jsfiddle.net/Eufragio/u342qgoz/1/

My problem is when exporting to excel, that the results bring me this way:

The result that I hope is this:

I am using aspnetcore 2.2 MVC application. populating datatable from linq where I specified orderbydescending(x==> x.logintime) this column login time is formated to format to display as below

Display(Name = "Login Time")]
[DisplayFormat(DataFormatString = "{0:MM/dd/yyyy HH:mm}", ApplyFormatInEditMode = true)]
//[DataType(DataType.DateTime)]
public DateTime LoginTime { get; set; }

when I load the datatable, the first column is not getting sorted. what would be the issue ? please find attached data populated. I am using below sequence of js, css files

----below is the view page in mvc. where "UserAccessLogs" is the name of table-- table data is in attachment.

<script src="@Url.Content("~/lib/DataTables/DataTables-1.10.18/js/jquery.dataTables.js")"></script>
<link rel="stylesheet" type="text/css" href="@Url.Content("~/lib/DataTables//DataTables-1.10.18/css/datatables.min.css")">
<link rel="stylesheet" type="text/css" href="@Url.Content("~/lib/DataTables/DataTables-1.10.18/css/jquery.dataTables.min.css")">
<link rel="stylesheet" type="text/css" href="@Url.Content("~/lib/DataTables/DataTables-1.10.18/css/dataTables.bootstrap4.min.css")" />
<script src="@Url.Content("~/lib/DataTables/Select-1.2.6/js/dataTables.select.min.js")"></script>
<link rel="stylesheet" type="text/css" href="@Url.Content("~/lib/DataTables/Select-1.2.6/css/select.bootstrap4.min.css")" />
<link rel="stylesheet" type="text/css" href="@Url.Content("~/lib/DataTables/Buttons/1.5.2/css/buttons.dataTables.min.css")" />
<script type="text/javascript">
$(document).ready(function () {

        $("#UserAccessLogs").DataTable({
            select: 'single',
            "lengthChange": false,
            "pageLength": 20,
            "pagingType": "full_numbers",
          **  "order": [[0, "desc"]]**
            //"columnDefs": [
            //    { "targets": 0, "visible": false }
            //]
        });
        //var table = $('#UserAccessLogs').DataTable();
        //$('#UserAccessLogs tbody').on('click', 'tr', function () {
        //    if ($(this).hasClass('selected')) {
        //        $(this).removeClass('selected');
        //    }
        //    else {
        //        table.$('tr.selected').removeClass('selected');
        //        $(this).addClass('selected');
        //    }
        //});
    });
</script>

}

also find attached output

Hi Everyone

Thank you for all the help I've been given/offered over the last few months - really appreciate it. My screens for batch data entry for samples is going well... but I have another question that I hope someone can answer.

Basically I have a function called validateReal that I use extensively when entering data into a normal form/modal to ensure only digits and 1 decimal place can be entered - and it works well. I assign it to keypress by using the following example:

$('[id^=bacteriaCFU]').keypress(validateReal);

and it Just works. So now i want to add this functionality to my batch data entry form when editing a field such as the following:

Using Firefox I can see the field id created is DTE_Field_tblAHUsample-yeastCFU

However, this is created when the cursor is pressed on the field so the following won't be assigned, I assume:

$('[id^=DTE_Field_tblAHUsample-yeastCFU]').keypress(validateReal);

Does anyone have any ideas on how I can assign the function to this input when I click it?

I assume, but probably wrong, expanding this:

         $('#example').on( 'click', 'tbody td.editable', function (e) {
              editor.inline( this );
          } );

Thank you in advance for any help given...

hi

i use this code for my pageLenght button

    buttons: [
        {
            text:       '<i class="fa fa-list"></i>',
            titleAttr:  'page lenght',
            extend:     'pageLength',
        }]

and my page lenght button have an icon (not a text)
but when i click on sub buttons (for example 10 rows) page lenght icon changed to "10 rows"

how can i prevent change text on Page Lenght Button???

Today I made a responsive horizontal and vertical smart search table template! https://codepen.io/ScottFSchmidt/pen/WLLdWZ

I decided to make a vertical smart search because many people thought it was more user friendly (what is your opinion?). Everything works, but I would like to invite anyone who has any suggestions to make it better. I am not advanced at CSS in my opinion and will be adding a few other features today possibly. Here is the beginning foundation:

 <table class="table table-striped table-bordered table-hover table-condensed mobilewrapper" cellpadding="3" cellspacing="0" border="0" style="width: 35%; margin: 0 auto 2em auto;" id="smart_table_across">
   <tr>
       <td align="left"><input type="text" class="column_filter" id="col0_filter" placeholder="First Name"></td>
            <td align="left"><input type="text" class="column_filter" id="col1_filter" placeholder="Last Name"></td>

     <td align="left"><input type="text" class="column_filter" id="col2_filter" placeholder="Zip"></td>

     <td align="left"><input type="text" class="column_filter" id="col3_filter" placeholder="Date"></td>
     </tr>

<table class="table table-responsive table-striped table-bordered table-hover table-condensed" cellpadding="3" cellspacing="0" border="0" style="width: 35%; margin: 0 auto 2em auto;" id="smart_table">
        <thead background-color= "darkgreen"> 
            <tr>
                <th>Column</th>
                <th>Search text</th>
            </tr>
        </thead>
        <tbody class="">
            <tr id="filter_col1" class="" data-column="0">
                <td>ID</td>
                <td align="left"><input type="text" class="column_filter" id="col0_filter"></td>
              </tr>
            <tr id="filter_col2"  class="" data-column="1">
                <td>First Name</td>
                <td align="left"><input type="text" class="column_filter" id="col1_filter"></td>
            </tr>
            <tr id="filter_col3" data-column="2">
                <td>Last Name</td>
                <td align="left"><input type="text" class="column_filter" id="col2_filter"></td>
            </tr>
            <tr id="filter_col4" class="hideClass" data-column="3">
                <td>Zip</td>
                <td align="left"><input type="text" class="column_filter" id="col3_filter"></td>
            </tr>
            <tr id="filter_col5" class="hideClass" data-column="4">
                <td>Date</td>
                <td align="left"><input type="text" class="column_filter" id="col4_filter"></td>
            </tr>

        </tbody>
    </table> 
    </div> </center>

Hi guys,
need some help with this.
I'm trying the rowgrouping but it's not grouping at all. i don't get any errors which makes it harder to troubleshoot.

Here is the code and the json file I'm using.

var bvtable = $('#bvTable').DataTable({
scrollY: 600,
"ajax": "data_new.json",
"columns": [
{
"data": "data.patient.pat"
},
{
"data": "data.patient.name"
},
{
"data": "id"
},
{
"data": "bv_date_submitted"
},
{
"data": "bv_completion_date"
},
{
"data": "all_status.2"
},
{
"data": "reverify_date"
},
{
"data": "next_step"
}
],
order: [[0, 'asc']],
rowGroup: {
dataSrc: "data.patient.pat",
startRender: function(rows, group) {
var patient = rows.data()[0]['data']['patient']['name'];

                console.log(patient);

                return $('tr')
                    .append("<td><a href='#' class='column-filter' data-filter='" + group + "'>" + group + "&nbsp;<i class='fa fa-filter'></i></a></td>" )
                    .append("<td colspan='9'>" + patient + "</td>");
            }
        }
    });

JSON FILE FORMAT:

"data": [{
"id": "1-100037168111",
"type": {
"code": 3,
"name": "PA Denied - Generic Coverage Only",
"action": " - "
},
"date": "11/26/2018",
"date_full": "2018-11-26T12:59:17.082Z",
"bv_date_submitted": "03/14/2018",
"pa_date_submitted": "12/14/2017",
"days_in_process": 42,
"reverify_date": "2020-01-07T14:17:34.104Z",
"bv_completion_date": "2019-02-09",
"next_step": [" - "],
"all_status": ["Covered - If insurer guideliens are met", " - ", "PA Denied - Generic Coverage Only"],
"data": {
"patient": {
"pat": 9633061201,
"name": "Bryana Crona",
"sex": "Male",
"DOB": "06/04/1973",
"SSN": 572221760,
"address": "9519 Kuhlman Valleys, East Gaymouth, AZ 80936",
"email": "caleb27@yahoo.com",
"primary_phone": "107-739-0860",
"alternate_phone": "826-062-1862",
"hipaacompleted": "08/25/2018",
"hipaaexpire": "02/16/2018"
},
"physician": {
"name": "Marta McClure",
"NPI": "90432264",
"tax_id": "LT800706797090580719",
"ptan": 554863189,
"email": "lonnie22@hotmail.com",
"phone": "284-815-7447",
"fax": "128-710-5386"
},
"insurance": {
"type": "Health Insurance",
"company": "Kilback LLC",
"phone": "139-052-9554",
"member_id": 817584244,
"group_id": 186542586
},
"facility": {
"name": "Sipes - Considine"
}
}
},

I'm showing a select list of items (MapCategory) that a Map item can belong too. I want to disable the Create button in the Map editor UI until the user has created at least one MapCategory item. How can I determine the count of MapCategory items on the client side.

A snippet of code from the Map editor looks as follows:

    Editor::inst($db, 'Map', '_id')
        ->fields(
            <snip><snip><snip>
            Field::inst('Map._idCategory')
                ->options(Options::inst()
                    ->table('MapCategory')
                    ->value('_id')
                    ->label('name')
                )
                ->validator(Validate::dbValues()),
            Field::inst('MapCategory.name'),
            <snip><snip><snip>
        )
        ->leftJoin('MapCategory', 'MapCategory._id', '=', 'Map._idCategory')
        ->process($_POST)
        ->json();

The MapCategory is shown using a 'Select' control on the client (JavaScript) side. I'd like to disable 'Create' button on Map table until at least one MapCategory has been created. How can I get the count of MapCategory items in the editor above?