Hello,
How can I display check mark with color without allowing to change it?
I try it and no success so far...
Please help.
Here my code:

GR_1 thead, th, td {

line-height: 3.2vh;
white-space: nowrap;
}

GR_1 th, td {

background-color: darkblue;
color: white;
}
table.dataTable thead .sorting:after,
table.dataTable thead .sorting:before,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_asc_disabled:before,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_desc_disabled:after,
table.dataTable thead .sorting_desc_disabled:before {
bottom: .5em;
}
/* Safari */
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
.even.selected td {
background-color: blue;
}
.odd.selected td {
background-color: blue;
}
</style>

var headerdata = [ 'Product','Description','G/L Acct.','Description.','Sale?'];
var columnwidth = [150,470,150,230,60];
var columnalign = ['dt-body-left','dt-body-left','dt-body-left','dt-body-left','dt-body-center select-checkbox'];
var dataSet = [ ['000000000','UNASSIGNED','5000','SALES - DRY GROCERIES','Y'],['000080 ','2/3/BUNS CHELSEA','5070','SALES - BAKED GOODS','Y'],['000090 ','16/LOAF/DEMPSTERS BREAD RAISIN','5070','SALES - BAKED GOODS','N']] ;
var columnsNM = [];
for (var i in headerdata) {
columnsNM.push({title: headerdata[i],width: columnwidth[i],className: columnalign[i],});
}
$(document).ready( function () {
$('#GR_1').DataTable( {
select: true,
deferRender: true,
data: dataSet,
columns: columnsNM,
scrollY: '86.94vh',
scrollCollapse: false,
orderClasses: false,
paging: false,
bFilter: false,
bLengthChange: false,
bInfo: false,
bProcessing: true,
pageLength: 999,
processing: true,
keys: true,
rowId: function(a){
return 'DT_' + a.uid;
},
} );
var table = $('#GR_1').DataTable();
$('#GR_1 tbody').on( 'click', 'tr', function () {
if ( $(this).hasClass('selected') ) {
$(this).removeClass('selected');
}
else {
table.$('tr.selected').removeClass('selected');
$(this).addClass('selected');
}
} );
} );
</script>

I want in column 'Sale?' see check mark, not values 'Y', 'N'.
Thank you.

Hello there !

I'm trying to update dynamically an already initialized datatable (with some export and print buttons, with a searchbar). These functionnalities are working perfectly at first.
However, I have to replace data from my table, thanks to a script included in an iframe.

So, I think that I had to create another draw of this datatable.

Here's the code:
`

        dataTableProd = $('#myTable');

        dataTableProd.DataTable({
            "destroy": true,
            "ordering": false,
            "paging": false,
            "language": {
              "url": "/orders/js/french.json"
            },
            "initComplete": function() {
                // Just made some worthless stuff
            },
            dom: "Bfrtip",
            buttons: [
              { extend: "excel", text: "Export Excel", className: "btnExportExcel" },
              { extend: "pdf", text: "Export PDF" },
              { extend: "print", text: "Imprimer", exportOptions: 
                {
                  columns: ':visible',
                    stripHtml: false
                }
              }
            ]
        });

        dataTableProd.DataTable().draw();

`

This new structure is displayed perfectly. I checked the searchbar update about new data included in my table and I find it.
But the last functionnalities that doesn't work are the updated buttons, which apparently lost some listeners from "dataTables.buttons.min.js" script, even if I put it in the iframe page.

Can I have an alternative to call actions despite this problem with a custom listener on theses buttons, or should I make this listener back to fix it ?

Thanks in advance for your reply.

I'm initializing my Datatable in a cshtml partial view, however when I try to include Datatables I'm getting an error.

cshtml file:

@using VPAI.Areas.DynamicScheduling.Models
@using System.Reflection
@using System.ComponentModel
@using System.Data
@using Datatables

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/DataTable")

I've added the Datatable-Editor-Server.dll to my references. When I put "using DataTables;" in one of my cs files it doesn't have an error. When I try to include it in the cshtml file it gives me the following error: "The type or namespace name 'DataTable' could not be found (are you missing a using directive or an assembly reference?)." Is there anyway to use it in my cshtml file?

Using datatables.net-searchpanes as an ES6 module I had to edit node_modlues/datatables.net-searchpanes-dt/js/searchPanes.datatables.js and replace "searchPanes" with "searchpanes" (lower case "p")

I am trying to build a datatable based off a user defined function. I see a post where code is given on how to grab the column names dynamically: https://datatables.net/forums/discussion/comment/142403#Comment_142403

However, I am having trouble getting the data into the correct format. If you look at my commented out lines, there are several techniques I have tried (and you can probably tell by what I tried that I am very new to this )

using System;
using System.Collections.Generic;
using System.Data.SqlClient;
using System.Net.Http.Formatting;
using System.Web;
using System.Web.Http;
using DataTables;
using Billing.Models;
using Newtonsoft.Json;

namespace Billing.Controllers
{
    public class ToGenerateController : ApiController
    {
        [Route("api/ToGenerate")]
        [HttpGet]
        [HttpPost]
        public IHttpActionResult toGenerate()
        {
            var request = HttpContext.Current.Request;
            var settings = Properties.Settings.Default;
            var AsOfCookie = request.Cookies["AsOfDate"].Value;
            string query = "select * from udf_FundOrgFTE_AdjustedFTEPercentages ('" + AsOfCookie + "')";
            string connectionString = settings.DbConnection;

            using (SqlConnection conn = new SqlConnection(connectionString))
            {
                SqlCommand command = new SqlCommand(query, conn);

                conn.Open();
                SqlDataReader reader = command.ExecuteReader();
                var dt = new System.Data.DataTable();
                dt.Load(reader);
                object[] result = new object[dt.Rows.Count + 1];

                for (int i = 0; i <= dt.Rows.Count - 1; i++)
                {
                    result[i] = dt.Rows[i].ItemArray;
                }

                reader.Close();
                return Json( result);
                //string strArray = "{ 'draw':null,'data':[" + result.ToString() + "]}" ;
                //return Json( strArray );
                //var json = JsonConvert.SerializeObject(result);
                
                //return Json(json);
                //return Json("{ 'draw':null,'data':[" + result + "]}");
            }
        }

    }
}

Example: A, D, E are the groups under which 10 rows present for each group. Now ordering of Data table should be D group data then A group data and finally E group data. How to Achieve this. Please Anyone help me here,

I've server side srcipt written for both global search and individual column search but don't know how to make it work in datatables. Currently when I search in both global and individual column I get an error as shown in screenshot. Does any one know how to make it work ?

Thanks

This is 5000 rows X 20 columns.
I already using minified css files. But it is taking around 5 sec to resize.
Whole web app is unresponsive during these 5 seconds of resizing.

Is there a way to show loading overlay onBeforeResize and hide it in OnResize event.
Any suggestions how to keep browser more responsive during the resizing time?

Also browser is freezing during Redraw time. Any help with that?

We use the calendar for bookings. On click we have a logic to select the cells and mark a start and end date.
The user can click on two dates or use click and drag.

But after an event is already scheduled, the click or click and drag works everywhere in the cell except in the event container.
Is that the expected behavior?

Is there any workaround for that?

Here is a picture of the calendar.

Thanks.

Hi
I'm wondering if it is possible to have a toggle button along with the other buttons, that would turn on/off for fixed header? Some of the users love fixed header, some doesn't, so it would be nice to have a button, that turned it on or off.
Any ideas?
Claus

I recently switched DataTables from client-side to server-side, however the OR condition does not work for server-side, but it works for client-side. Only a single value search works for server-side. The value in var regex is correct on both, but if an OR condition is entered in the server-side table, no records are returned.

For client-side, I have the table defined as:

var table = $('#example').DataTable( {
"order": [[ 0, "desc" ]], // default to descending application id in first column
"dom": 'l<"top">t<"bottom"ifp><"clear">', // order of everything t-table, i-info,
"language": { // set language for the 'show x entries' menu (now just show x)
"lengthMenu": "Show MENU "
}
});

For server-side, I have the table defined as:

var table = $('#example').DataTable({
"order": [[ 0, "desc" ]], // default to descending application id in first column
"processing": true,
"serverSide": true,
"ajax": {
"url": "/app/api/admin_tables/post_datatable_json",
"type": "POST"
}
});

The code for searching a column has not changed:

$('#status_dropdown').change(function(){
var statuses = $('#status_dropdown option:selected');
var selected = [];
$(statuses).each(function() {
selected.push([$(this).val()]);
});
var regex = selected.join("|");
table.column(2).search(
regex, true, false
).draw();
});

Hi

I'm trying to convert the following sql into valid server DT code but I'm struggling a bit translating the aliases and embedded select statement in the left join.

• Here's the sql:

SELECT V.ID, ISNULL(V.CustomerIndex, C.CustomerIndex) as CustomerIndex

FROM GlobalPriceLists as V

LEFT JOIN (SELECT CustomerIndex, ListType, ListName FROM GlobalPriceLists WHERE CustomerIndex = 0) as C

ON C.ListType = V.ListType AND C.ListName = V.ListName AND V.CustomerIndex = 1

• Server code so far:

editor = new Editor(db, "GlobalPriceLists", "GlobalPriceLists.id")
.Model<CustomerSNsDBModel.GlobalPriceLists>("GlobalPriceLists");
editor.Field(new Field("GlobalPriceLists.id")
.Set(false)
);
editor.MJoin(new MJoin("GlobalPriceLists")
.Model<PriceListsDBModel>()
.Name("GlobalPriceLists.CustomerIndex")
.Link("GlobalPriceLists.ListType", "GlobalPriceLists.ListType")
.Link("GlobalPriceLists.ListName", "GlobalPriceLists.ListName")
.Where(q =>
q.Where("GlobalPriceLists.CustomerIndex", lngCustIdx, "=")
)
.Order("GlobalPriceLists.id ASC")
.Field(new Field("id")
.Options(new Options()
.Table("GlobalPriceLists")
.Value("id")
.Label("CustomerIndex")
)
.Set(false)
)
.Set(false)
);
editor.Field(new Field("GlobalPriceLists.ListType")
.GetFormatter((val, data) => CommonUtilities.IsNullOrEmpty(val) == true ? 0 : val)
);
editor.Field(new Field("GlobalPriceLists.ListName")
.GetFormatter((val, data) => CommonUtilities.IsNullOrEmpty(val) == true ? string.Empty : val)
);
editor.LeftJoin("GlobalPriceLists AS C", "GlobalPriceLists.id", "=", "GlobalPriceLists.SubPackID");
editor.Where("GlobalPriceLists.CustomerIndex", 0);
editor.Debug(true);
editor.Process(formData);

Thanks a lot.

Hey, here is my example http://live.datatables.net/yefemeto/4/

If you click on the check box to filter 562.. It's pulling another row with 562 in it. How can I only show rows with 562?

Thanks

I currently have a DataTable that has a column containing a string of numeric values such in the format of '14,11,10'. They can only be a maximum of two digits long, but the number of values can vary. It could be a single value such as '11' or as many as four values within the string '16,14,10,21'.

In addition, I have a match handler and a select2 box that contains all of the potential number values. A user can either select to match 'Any', which will match every result if the number string contains at least one of the selected numbers. Selecting 'Match All' will only search for the specific combination, no matter the order of the numbers.

<select class="form-control form-control-alternative" id="syngery_match" name="syngery_match">
    <option value="any">Match Any</option>
    <option value="all">Match All</option>
</select>

<select class="form-control form-control-alternative synergies-multi select2-hidden-accessible" name="synergies[]" multiple="" id="synergies" data-select2-id="synergies" tabindex="-1" aria-hidden="true">
    <option value="1">NP</option>
    <option value="2">BL</option>
    <option value="3">X</option>
    <option value="4">BM</option>
    <option value="5">TN</option>
    <option value="6">DK</option>
    <option value="7">AD</option>
    <option value="8">WK</option>
    <option value="9">WM</option>
    <option value="10">RS</option>
    <option value="11">M</option>
    <option value="12">1T</option>
    <option value="13">TK</option>
    <option value="14">WC</option>
    <option value="15">SP</option>
    <option value="16">FB</option>
    <option value="18">HH</option>
    <option value="19">DZ</option>
    <option value="20">CP</option>
    <option value="21">HT</option>
    <option value="22">CS</option>
</select>

Match Any

I have this part working aside from one minor issue with the single digit numbers.

Example Input: [1,22,16]

if ($("#syngery_match").val() == "any")
{
    var any_string = $(this).val().toString();
    var select_snys = any_string.replace(',', '|');
    players_table.columns("#synergies_column").search(select_snys, true, false).draw();
}

Since 1 was included in the string of numbers, it returns rows that contain values such as 11,12,13....19, 21, etc. How would I go about altering my code so the rows returned have to contain the exact number in the string and not just a part of the number?

Match All

This part is also partially working. The only issue here is that the string of numbers entered only returns rows with the numbers in that exact order.

Target Row: [13,15,6]

Example Input: [6,13,15]
Example Input 2: [15,13,6]

The two example inputs return no results as the numbers were entered out of order compared to the column on the table.

else if ($("#syngery_match").val() == "all")
{
    var any_string = $(this).val().toString();
    players_table.column("#synergies_column").search(any_string, true, false).draw();
}

Hopefully I was able to explain my situation clearly enough. Any help would be appreciated!

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.

I'm new to datatables.net and In my application, I want to give print functionality separate button which I have separately added to my HTML code. Is there a way to do this?

Thanks,
Erandika

I know I must be missing something very basic, but have tried ll sorts of things and cannot figure out what is wrong. I am trying to get this table to full excel like functionality and so want keys to be able to edit. I think I set it up correctly, have tried all the settings and tried the examples and it just does not work, all the other features work, but it won't let me edit the cells inline.
Here is a current example:
https://newyorklife.acms.com/plnr3zzewp46/
Thanks in advance!

Hey,

I'm using ajax object configuration for upload type of input. Everything works great, I just have an issue where if validation of uploaded image is rejected, server returns status code 422, so datatables displays "A server error occurred while uploading the file".

For other ajax requests I was able to handle this inside "error" function, but in this case it doesn't seem to be fired. Bellow is my code:

{
    label: 'Image:',
    name: IMAGE_NAME,
    ajax: {
        url: route('dt.post'),
        type: 'POST',
        data: (data) => {
            data._token = window.Laravel.csrfToken;
        },
        dataFilter: function (response) {
            const json = JSON.parse(response);
            $.each(json.files, function ( table, files ) {
                $.fn.dataTable.Editor.files[table] = files;
            });
            return response;
        },
        error: function (xhr, e/*, thrown*/) {
            let data = xhr.responseJSON;
            if (data && data.hasOwnProperty('fieldErrors')){
//                success(data);
            } else {
//                error(xhr, e, thrown);
            }
        }
    },
    type: 'upload',
    display: function ( file_id ) {
        ...
    },
    clearText: "Clear",
    noImageText: '-'
}

Any idea why error function is not fired when server code != 200?

Beside this approach I also tried to use ajax function instead of object function(method, url, data, success, error) (I use this as default method all over the project) so that I was able to call success or error callback, depending on what happened. If I add this to my upload field, upload field will completely ignore function and just make a POST request to the same page user is currently on. This works for DataTables data calls though, so not sure why it doesn't here...

Is there a way to handle validation errors and prevent "A server error occurred while uploading the file" getting displayed for upload field?

P.S.: After using DataTables for 5+ years I think, I think I could easily say it's one of the most advanced and flexible packages I ever used. GJ Allan and team

I am trying to connect to an oracle database in my .net project. I am getting an error in the line

using (var db = new Database(settings.DbType, settings.DbConnection))

error is: unable to find the requested .net framework data provider. it may not be installed

do I need add a reference to something?

Greetings
I use custom primary key, named key_id instead of the id column.
I use custom function to create this unique key_id, and using setFormatter on the field for that, while in the javascript side, I sent the key_id as a hidden field with value of null or false, just to make sure it will use the setFormatter function.
Example:

$e = Editor::inst($db, 'customers', 'key_id')
                ->fields([
                    Field::inst('customers.key_id')->setFormatter(function ($data) {                        
                       if($data){
                          //Not Modifying the KeyId in case of editting.
                          return $data;
                         }else{
                           //Generating New Id for Newly created Row, which has $data of false or null;
                           return SomeSpecialFunctionForRandomKeyId();
                        }
                    }),
                    Field::inst('customers.name'),

It is creating it fine, but the problem is, when I listen for the json of the creating request in javascript, I get empty data array. (I'm expecting to get the newly created row in the data array).
When I truned on debug mode for sql queries, I got two of them:
1- One for insertion, which is doing well.
2- Second one for selecting the created row, which bind the value of (ID OF CREATED ROW) to the key_id primary key column. That's why I get empty array I guess.
Any mistakes in my script or any suggestions ?