Hi,

I am trying to migrate my project to Symfony 4. To do so I want to use webpack/encore instead of static assets. I am unsing the datatables plugin and now I am trying to make it work. After requiring the module I cannot use $.fn.dataTables.

TypeError: $.fn.dataTable is undefined

The module is imported via require('datatables.net');
I also tried to use AMD: require('datatables.net')(window, $); this resulted in TypeError: this is undefined (jquery.dataTables.js:132).

Writing the require output to $.fn.dataTable also doesn't work.
dataTable = require('datatables.net'); $.fn.dataTable = dataTable;

Of course it's no longer undefined but it also doensn't work because the module exports DataTable and not $.fn.dataTable. So the resulting error when unsing it is TypeError: $(...).DataTable is not a function

I would appreciate your help to finally make this work like I would use static assets.

I have a datatable shown below:

I'm trying to use autoFill to allow users to drag values across the whole row however, I do not want the values to go into the columns that are yellow and have the class "weekend". I have managed to grab the class name of the cells using cells[0][0].cell.node().className on a autoFill event however, I do not know how to stop the values from going into the yellow columns and with the class "weekend"

How do I go about stopping the yellow columns from getting autoFilled?

Hi guys!

This is probably an overkill but my user would like to input date format in Inline Editor using any of these: 21-01-2019, 21-01-19, 21-01, 21-1-2019, 21-1-19, 21-1, / US date formats Etc, auto-convert and register into the database.

Is this possible?

Much thanks!!

@allan

As requested, here is my sample project links:
https://datatables-php.000webhostapp.com/
https://datatables-ajax.000webhostapp.com/

I often get errors like these:

[Violation] 'setTimeout' handler took 143ms jquery.min.js:2
[Violation] Forced reflow while executing JavaScript took 30ms
Active resource loading counts reached a per-frame limit while the tab was in background. Network requests will be delayed until a previous loading finishes, or the tab is brought to the foreground. See https://www.chromestatus.com/feature/5527160148197376 for more details

Any simple ways to make it faster? Or perhaps my code just has something wrong.

Anyway, I decided to make a separate topic as this is a different issue now than my original post from here:
https://datatables.net/forums/discussion/54100/using-ajax-method-url-ajax-arrays-txt-as-a-server-side#latest

This is a non-urgent issue, but I do hope you get time to eventually look at it. Thanks!

I have table created column dynamically and bind JSON data to it using Jquery. Implement coumn search on Document.Ready function and column search working fine. but when I set scrollX= true to implement horizontal scroll and fixcolumn then horizontal scroll apply to table but column search stop working with it.

Can you guide me how to work together column search and horizontal scrollbar and fixcolumn together..

sample code

Column search

  $j('#tblMasterList tfoot th').each(function () {
        var title = $j(this).text();
        $j(this).html('<input type="text" placeholder="Search ' + title + '" />');
    });

    // DataTable
    var table = $j('#tblMasterList').DataTable();
   
    // Apply the search
    table.columns().every(function () {
        var that = this;

        $j('input', this.footer()).on('keyup change', function () {
            debugger;
            if (that.search() !== this.value) {
                that
                    .search(this.value)
                    .draw();
            }
        });
    });

    var r = $j('#tblMasterList tfoot tr');
    r.find('th').each(function () {
        $j(this).css('padding', 8);
    });
    $j('#tblMasterList thead').append(r);
    $j('#search_0').css('text-align', 'center');

DataTable binding with columns and JsonData

  $j('#tblMasterList').DataTable({
       
        data: jsondata,
        columns: vCols,
        scrollX: true
       
    });

$('#purchase_data tfoot th').each( function () {
var title = $(this).text();
$(this).html( '<input type="text" placeholder="Search '+title+'" />' );
} );
var purchasedataTable = $('#purchase_data').DataTable();
processeddata.columns().every( function ( colIdx ) {
$( 'input', processeddata.column( colIdx ).footer() ).on( 'keyup change', function () {
// alert(colIdx.value);
processeddata.column(colIdx).search( this.value ).draw();
} );
} ); kindly can any one tell, whats wrong in above code, because when i'm searching for some data in column, its not displayed matched records.

can i set up page zoom when export excel ?

I have a date being return from java by JSON. If the date is null then no value is returned. The DataTable then displays "Invalid date". I would like it to display nothing (i.e., space, ""). This is the code:

var accountUpdateTable = $('#accountUpdateTable').DataTable( {

        "info":     false,
        dom: 'Bfrtip',
        buttons: ['copy', 'csv', 'excel', 'pdf', 'print'],
        columns: [
              {data: 'accountId',
                  visible: false,
                  searchable: false},
              {data: 'emailaddress'},
              {data: 'surname',
                  defaultContent: ""},
              {data: 'otherNames',
                  defaultContent: ""},
              {data: 'level',
                  defaultContent: ""},
              {data: 'enabled',
                  defaultContent: ""},
              {data: 'archived',
                  defaultContent: ""},
              {
                  data: null,
                  className: "center",
                  defaultContent: '<button id="reset">Reset</button>'
              }
             ],
         columnDefs: [ {
             targets: [6],
             render: $.fn.dataTable.render.moment( 'DD/MM/YYYY' )
         } ],
    } );

This is the result:

Hi

I have published my Aurelia business project here: https://fysegplannerwebapp.azurewebsites.net/#/projects/CABL2016/employee/28/plan

Y have configured the DataTable in this way:

configureDataTable() {
    this.$outSourcingDataTable = $(this.outSourcingDataTable).DataTable({
      info: false,
      searching: false,
      paging: false,
      scrollX: true,
      fixedColumns: { leftColumns: 4 },
      scrollY: "400px",
      scrollCollapse: true,
      data: this.projectOutSourcingData,
      columns: this.columns
    });
  }

because I want to fix the first 4 columns but does not work. I don't know if is problem of the extension or what

Any idea Please?

Regards

During the init of the Datatable, my server process send to the client an error in a json format.
How can i put this information in a modal windows? Datatables give me an error, that are missing data
to build the table but i need the Information of the Server

Hi @allan!

I would like to change a cell value based on another cell's database record. E.g if cell A is XYZ in database, cell B will show red text ("Open"). How do I point to cell A using render?

I'm using Inline Editor.

row[0] - cell A
row[1] - cell B

//Status -17
{ "width": 45, "targets": 17,
render: function (data, type, full, meta) {
if (data == "Open") {
return "

";
}

Hello,

When having the control for the details view put in a separate column, the rendering is slightly shifted to the top (see screenshot).

The example shown here has this issue:
https://datatables.net/extensions/responsive/examples/child-rows/column-control.html

To fix this, I overrode the "top" properties of the "control" class and set it to auto:

table.dataTable.dtr-column > tbody > tr > td.control::before,
table.dataTable.dtr-column > tbody > tr > th.control::before {
    top: auto;
}

The change has been tested in IE 11, Firefox and Chrome.

From your experience, do you think this change is globally safe? If not, any idea on how to fix this issue?

Thanks for your help.

HI Team,
I got an requirement like , after adding the new row in the existing table ( jquery datatable). The newly added row or data show on the top of the table i.e. it should be visible at the first of the table.
It is possible to do so, please suggest me to develop this scenario.

Thanks in Advance
Vadivel

Eg:
I have text as "First Name: Mani" in cell.
I want to export as First Name: in bold font and Mani in normal font.

Can we do it.
Please help me out.
Thanks in Advance.

I'm running into some difficulty using Editor 1.5.6 and WebAPI with SQL Server tables in a schema ('proto') other than the default ('dbo). For one thing, it's not possible to define a model with classes named "proto.myTable." Instead I am specifying everything with Fields, which seems to work, although the Options method is not reliably populating a select box in the UI. In an earlier answer (https://datatables.net//forums/discussion/comment/83867/#Comment_83867) it was suggested that an Editor.Schema() method might eventually be added to support non-dbo schemas. Any update on this, or workaround in the interim?

Hi, when I'm trying to upload a file I have an error: "File uploaded to a field that does not have upload options configured". Help me please

Controller:

public ActionResult JTovar()
        {
            var request = System.Web.HttpContext.Current.Request;
            var settings = Properties.Settings.Default;
            using (var db = new DataTables.Database(settings.Dbtype, settings.DbConnection))
            {
                var response = new Editor(db, "Tovar", "id")
                    .Model<ModelTovar>()
                    .Field(new Field("Tovar.id"))   
                                     
                    .MJoin(new MJoin("image")
                            .Link("Tovar.id", "interImage.idTovar")
                            .Link("image.id", "interImage.idImage")
                    .Model<MjoinImageTovar>()
                    .Field(
                       new Field("Tovar.Links")                                     
                           .Upload(
                           new Upload(request.PhysicalApplicationPath + @"uploads\__ID____EXTN__")
                           .Db("image", "id", new Dictionary<string, object>
                           {
                              {"fileName", Upload.DbType.FileName},
                              {"fileSize", Upload.DbType.FileSize},
                              {"webPath", Upload.DbType.WebPath},
                              {"systemPath", Upload.DbType.SystemPath}
                           })
                           .Validator(Validation.FileSize(50000000, "Max file size is 500000K."))
                           .Validator(Validation.FileExtensions(new[] { "jpg", "png", "gif","html","htm" }, "Please upload an image or html file."))
                                  )
                          .SetFormatter(Format.NullEmpty())
                            )                  
                          )
                    .Process(request)
                    .Data();
                return Json(response, JsonRequestBehavior.AllowGet);
            }
        }

{
                label: "Links:",
                name: "Tovar.Links",
                type: "uploadMany",
                display: function (id) {
                    return '<img src="' + editor.file('image', id).webPath + '"/>';
                },
                noImageText:'No image'
            }
------------------------------------------------------------------------------------------------------
{
             data: "Tovar.Links",
             render: function (data)
             {
                 console.log(data);
                 return data?             
                      data.length + ' files(s)' :
                       'No file';
             },
             title: "Image"
         }
--------------------------------------------------------------------------------------------------------

Models:

 public class MjoinImageTovar
    {
        public class interImage
        {
            public int id { get; set; }
            public int idTovar { get; set; }
            public int idImage { get; set; }

        }
        public class image
        {
            public int id { get; set; }
            public string fileName { get; set; }
            public int fileSize { get; set; }
            public string webPath { get; set; }
            public string systemPath { get; set; }
        }
    }

public class ModelTovar
    {
        public class Tovar
        {
            public int id { get; set; }         
            public string Links { get; set; }
           
        }

Edited by Allan Formatting using markdown.

Hi,

I would like to create a simple form for uploading and downloading documents (like pdf's and doc's) directly to/from the database.
(I have decided to store the files directly in the database due to maintenance and safety reasons but that's another discussion)

I have two tables: The first one contains editable info for the user and the second one contains the files themselves.

These are the tables:

Table 1: files_header                         Table 2: files_content
+----+--------------+-----------+---------+   +----+-----------------+-------+------+---------+
| id | file_name    | file_desc | file_id |   | id | name            | size  | type | content |
+----+--------------+-----------+---------+   +----+-----------------+-------+------+---------+
| 1  | Contract X   | Important | 1       |   | 1  | contract.pdf    | 4532  | pdf  | 12e1l.. |
| 2  | Appendix Y   |           | 4       |   | 4  | appendix.doc    | 9408  | doc  | jk34j.. |
| 3  | Evidence Z   |           | 9       |   | 9  | Screenshot.png  | 2054  | png  | 90sdc.. |
+----+--------------+-----------+---------+   +----+-----------------+-------+------+---------+

The content column in the second table contains the files themselves in a blob format.

This is my html:

<table id="fileUpload" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Description</th>
            <th>File</th>
        </tr>
    </thead>
</table>

This is my Script:

editor = new $.fn.dataTable.Editor( {
    ajax: "php/control.php",
    table: "#fileUpload",
    fields: [ {
            label: "Name:",
            name: "file_name"
        }, {
            label: "Description:",
            name: "file_desc"
        }, {
            label: "Document:",
            name: "file_id",
            type: "upload",
            display: function ( file_id ) {
                return " ????? ";
            },
            clearText: "Clear"
        }
    ]
} );

var table = $("#fileUpload").DataTable( {
    dom: "Brtip",
    ajax: "php/control.php",
    columns: [
        { data: "file_name" },
        { data: "file_desc" },
        {
            data: "File_IntID",
            render: function ( File_IntID ) {
                return ID ?
                    " ????? " :
                    null;
            },
            defaultContent: "No document",
            title: "Document"
        }
    ],
    select: true,
    buttons: [
        { extend: "create", editor: editor },
        { extend: "edit",   editor: editor },
        { extend: "remove", editor: editor }
    ]
} );

In this javascript we can already see my challenge (the question marks "?????"). I would like get the file as a download link in the table.
I have no idea how get this work with DataTables.

But let me show the server side script first.

This is my PHP:

include( "../DataTables/Editor-PHP-1.7.0/php/DataTables.php" );
    
use
    DataTables\Editor,
    DataTables\Editor\Field,
    DataTables\Editor\Format,
    DataTables\Editor\Mjoin,
    DataTables\Editor\Options,
    DataTables\Editor\Upload,
    DataTables\Editor\Validate,
    DataTables\Editor\ValidateOptions;
 
Editor::inst( $db, 'files_header', 'File_UniqueID' )
    ->fields(
        Field::inst( 'id' ),
        Field::inst( 'file_name' ),
        Field::inst( 'file_desc' ),
        Field::inst( 'file_id' )
            ->setFormatter( Format::ifEmpty( null ) )
            ->upload( Upload::inst( ????? )
                ->db( 'files_content', 'id', array(
                    'name'    => Upload::DB_FILE_NAME,
                    'size'    => Upload::DB_FILE_SIZE,
                    'type'    => Upload::DB_MIME_TYPE,
                    'content' => Upload::DB_CONTENT
                ) )
                ->validator( Validate::fileSize( 100000000, 'Files must be smaller than 100MB' ) )
                ->validator( Validate::fileExtensions( array( 'pdf', 'doc', 'ppt', '...' ), "Please upload a document" ) )
            )
    )
    ->process( $_POST )
    ->json();

Again, I have no idea how to pass something from the PHP to the JS in order to create a download link or at least some functionality to retrieve the file.

I have searched the net for days and tried a lot by myself but couldn't find an answer.
It would be awesome if somebody has an answer to this.

Thank you very much!

I've been trying without success to change the search language option of an already initialized/drawn datatable object ... as far as I understood it should be possible .. but I only get errors (not a function, undefined, uncaught,..).. any suggestion?

I have an UploadMany that doesn't appear to fire a callback thru AJAX when an item is "Deleted" (X clicked on the right):

            editor = new $.fn.dataTable.Editor(
                {
                    ajax: { 
                        data: 
                        function(d) {
                            d.DT_RowID = editor.ids();
                        },
                        type: "POST",
                        url: "/AudioClips/Edit"
                    },
                    idSrc: "id",
                    table: "#Table_be6112dc6271436db5230ee7143273b7",
                    fields: [
                        {
                            name: "name",
                            label: "Name"
                        },
                        {
                            name: "clips",
                            label: "Audio Clip",
                            type: "uploadMany",
                            noFileText: "No Clips Uploaded.",
                            display: function (file)
                            {
                                if(file.fullyQualifiedID)
                                    return '<audio controls src="/AudioClips/Clip/?source=' + file.fullyQualifiedID + '" />';
                                else
                                    return '<audio controls src="/AudioClips/Clip/?source=' + editor.ids() + '_' + file + '" />';
                            }
                        }
                    ]
            } );

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

    var dataTable = $("#Table_be6112dc6271436db5230ee7143273b7").DataTable(
        {
            processing: true,
            serverSide: true,
            filter: true,
            order: [0, 'asc'],
            orderMulti: false,
            ajax: {
                url: "/AudioClips/Items?id=2dac5d78-3373-47cf-815a-4cd8e9b78c3e",
                type: "POST",
                datatype: "json"
            },
            columns: [
                {
                    className: "dt-editable",
                    data: "name",
                    name: "Name",
                    autoWidth: true
                },
                {
                    className: "dt-editable",
                    data: "clips",
                    name: "Audio Clip",
                    render: function (d)
                    {
                        if (d.length)
                        {
                            return "<button class=\"btn btn-sm btn-outline-secondary dt-editable\">" + d.length + " Clips</button>";
                        }

                        return  "No Clips Uploaded.";
                    },
                    autoWidth: true,
                },
                {
                    data: "hasChildren",
                    name: "Is Variable?",
                    autoWidth: true
                },
                {
                    data: "id",
                    orderable: false,
                    render: function (data, type, row, meta)
                    {
                        return '<button class=\"btn btn-sm btn-outline-success Table_be6112dc6271436db5230ee7143273b7-details\">Details</Button>&nbsp;<button class="btn btn-sm btn-outline-danger" onclick="DeleteAudioClip(\''+data+'\');">Delete</button>';
                    }
                }]
        });

I'm getting not JS errors in Chrome and the break-point for the ajax() call in the editor itself is not being hit. I was curious if it was, perhaps, an issue with losing focus (I know that sometimes things don't update until focus is lost), but the break-point is still never hit and the server doesn't seem to get any calls either (from verbose logging).

It's fine if I need to tie into a custom parameter or something -- I just need to know what's up.

I'm using Row details to display extra information for each item in my table.

I see from the source row I can use row.child() to get a reference to the details panel (if it exists) for a given row.

Is there a way to go backwards? If I have a reference for the details can I get the parent?