Hello, what option to disable a publisher field for a user? What options does the datatable editor have to disable a field for the user?

I noticed this is possible with server-side processing, but the only info I could find about with client side was from this post from 2013: https://datatables.net/forums/discussion/16440/best-way-to-do-deferred-loading-client-side

Any updates on this?

From the various different pagination options, one that stands out the most would be this:

https://datatables.net/plug-ins/pagination/input

Yet it seems outdated and generally incompatible with the modern release of DataTables (as of now v1.10.16).

Has anyone managed to adapt this plugin for the current DataTables?

In my php server scripts I use "$db->setAttribute(PDO::ATTR_CASE, PDO::CASE_UPPER);" to force all sql server column names to come back as upper case in fetches so that $row['COLNAME'] always matches and I don't have to guess what case I used elsewhere. For better or worse, this works for me.

In the Editor.php script, where it counts the records and filtered records, it references $ssp_full_count['cnt'] and I've had to change this to $ssp_full_count['CNT'] since my database handle has CASE_UPPER attribute set otherwise it fails to set the record counts correctly.

Hi

I wonder if you could help me get Autocomplete to work. I have set up a basic test but still am struggling and would probably benefit from a basic example.

I am using JQueryUI/BS4/DataTables and have several different tables on a single page, 2 with editors. I want to use AutoComplete for the 'diagnosis' field. The relevant code is:

var diagnosisEditor = new $.fn.dataTable.Editor( {
        ajax: {
            url: 'common/ajax/diagnoses.php?id={id}',
            type: 'POST'
        },
        table: '#diagnoses',
        fields: [
            {
                "label": "patient_id:",
                "name": "diagnoses.patient_id",
                "type": "hidden",
                "def": "{id}"
            },
            {
                "label": "Date:",
                "name": "diagnoses.diagnosis_date",
                "type": "datetime",
                "format": "DD-MM-YYYY"
            },
            {
                "label": "Diagnosis:",
                "name": "diagnosis_list.diagnosis",
                "type": "autoComplete",
                "opts": {
                    "source": [
                        "john", "fred", "james", "malcolm", "dave", "alex", "ruby"
                    ]
                }

            },
            {
                "label": "Notes:",
                "name": "diagnoses.notes",
                "type": "text"
            }
        ]
    } );

The field appears, but AutoComplete does not seem to work. What am I doing wrong?!

Thanks in advance
Ronnie

Hi,
I have a use-case where I need to manipulate rows data across page with server-side processing.

E.g., first search rows by certain key, and then modify certain fields.
I have some code(coffeescript) like:

rowsToUpdate = dataTable.api().rows().eq( 0 ).filter (rowIdx) ->
        dataTable.api().cell(rowIdx, 1).data() == "1"

dataTable.api().cell(rowsToUpdate[i], 1).data(0) for i in [0..rowsToUpdate.length-1]

I know that rows() selector-modifier doesn't really work across page with server-side(because client side only knows about current page), I wonder if there is any work around? (aka, select/filter/manipulate rows across page)

Thanks,

Hello, everyone,

Please forgive any ignorance on my part. I am rather new to jQuery, and especially to DataTables.

Here is my issue: I was able to create a new DataTable object, pass in all of the necessary parameters (including those needed for FixedHeader), and everything worked fine except for one little thing: the FixedHeader option on the DataTable does not work unless I mess with the table once the page loads. For example, if I use one of the sort buttons in the column headers to sort the table (thereby redrawing it in the window), then the FixedHeader works, but if I just load the page then the headers are not fixed (until I mess with the table). I have also noticed that if I change the browser window size then the FixedHeader will work.

Here is my jQuery code:

... //  other code
// Create a new DataTable with ID tableName
var dataTable = $("#" + tableName).DataTable({
  lengthMenu: [50, 100, 150],
  language: {
    search: '<i class="fa fa-filter fa-lg"></i>',
    searchPlaceHolder: "Filter Records",
  },
  order: [[3, 'desc']],
  fixedHeader: {
    headerOffset: 67
  }
});
... // code continues

Does anyone have any suggestions? I am really at my wits' end over this problem.

Thank you all so much for your time,

• Tom

I am trying to get the values in one select list to be dependent on another.

The two fields in my editor are:
{ label: "Building", name: "mc_data_table1.building", type: "select" }, { label: "Area", name: "mc_data_table1.area", type: "select", placeholder: "", placeholderDisabled: false },

And this is the dependent code:
editor1.dependent('mc_data_table1.building', function (val, data, callback) { $.ajax({ url: 'get_building_areas.php?bldg=' + val, dataType: 'json', success: function (json) { callback(json); } }); });

"get_building_areas.php" returns this json (from response body in IE developer):
{"options": {"area":["1st Floor","2nd Floor","3rd Floor","4th Floor","5th Floor","6th Floor","7th Floor","8th Floor","Ground"]}}

But the "area" select list remains blank!

Server side code is:
Field::inst( 'mc_data_table1.area' ) ->setFormatter('Format::ifEmpty', null),

Any help would be appreciated. Thank you!

I'm working on some code that will allow you to specify an XML template to config the columns option, and you can configure a templating engine to trigger the display rendering.

The idea is you could specify a new templateConfig: '#template-config' option and it would parse the following:

<script id="template-config" type="text/template">
<columns>
    <column data="name" />
    <column data="position" />
    <column data="office" />
    <column data="extn" />
    <column data="start_date" render-value="data.display" render-sort="data.timestamp">
        <![CDATA[<strong>{{=data.display}}</strong>]]>
    </column>
    <column data="salary" />
</columns>
</script>

And it essentially convert it into something like:

columns: [
  { data: "name" },
  { data: "position" },
  { data: "office" },
  { data: "extn" },
  { data: "start_date", render: function (data, type, row, meta){
    if( type === "sort" ) return data.timestamp;

   // this is actually generated via a templating engine
    return "<strong>" + data.display + "</strong>";
  } },
  { data: "salary" }
]

The problem I'm running into making this as a plug-in, is there does not seem to be a way to interject code that runs before the columns option would be processed.

In order to make this a plugin, I think I would need to be able to run code before _fnCompatOpts() and _fnCompatCols() are called during the this.each() routine.

Is there any way to hook into the settings options before the logic really starts to be applied during the plugin initialization?

Am I missing anything?

If I can't do it this way, I'll just end up creating a helper method that does the work to build the columns option. Just thought it would be nice to implement it as a config option.

I have an array of strings that define buttons. I'd like to dynamically create those buttons in a DataTable table. for example, suppose I have an array ["item1", "item2"]. What I want in the datatable buttons definition is:

`  extend: 'collection',
  text: "Add Item <span class=\"caret\">",
  buttons: [
    {
      text: 'item1',
      action: function ( e, dt, node, config ) {
        window.location.href = href + "/items/new?name=item1";
      }
    },
    {
        text: 'item2',
        action: function ( e, dt, node, config ) {
          window.location.href = href + "/items/new?name=item2";
        }
    }
  ]
`

how would I go about doing this dynamically? The server is giving me a JSON array of the strings above. Now I need to build my buttons.

I am using Editor with Django and after a really long time of messing with it I finally got my database updating from editor. The problem I have now is the page isn't refreshing after submit. I have patched the code together from different places so I am not sure if I made a mistake in the javascript code. I searched the forums and google but I couldn't find anything that helped me.

Here is my javascript:

<script type="text/javascript" charset="utf-8">
// using jQuery
function getCookie(name) {
    var cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        var cookies = document.cookie.split(';');
        for (var i = 0; i < cookies.length; i++) {
            var cookie = jQuery.trim(cookies[i]);
            // Does this cookie string begin with the name we want?
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}
var csrftoken = getCookie('csrftoken');

var editor; // use a global for the submit and return data rendering in the examples

$(document).ready(function() {
    editor = new $.fn.dataTable.Editor( {
        ajax: {
             url: '/invoices/invoices/_id_/',
             type: 'PUT',
             headers: {'X-CSRFToken': '{{ csrf_token }}'},
            },
        "table": "#example",
        "idSrc":  'id',
        "fields": [
                {
                    "label": "Invoice Number:",
                    "name": "invoice_number",
                },
                {
                    "label": "Bill Name:",
                    "name": "bill_name",
                },
                {
                    "label": "Ordered By:",
                    "name": "ordered_by",
                },
                {
                    "label": "Job Type:",
                    "name": "job_type",
                },
                {
                    "label": "Well Name:",
                    "name": "well_name",
                },
                {
                    "label": "Contractor:",
                    "name": "contractor",
                },
                {
                    "label": "Creation Date:",
                    "name": "creation_date",
                },
                {
                    "label": "Invoice Office Code:",
                    "name": "invoice_office_code",
                },
                {
                    "label": "Invoice Total:",
                    "name": "invoice_total",
                },
                {
                    "label": "Date sent for signature:",
                    "name": "date_sent_for_signature",
                    "type": "date",
                },
                {
                    "label": "Method Sent:",
                    "name": "method_sent"
                },
                {
                    "label": "Person sent with invoice:",
                    "name": "person_sent_with_invoice"
                },
                {
                    "label": "Date invoice returned:",
                    "name": "date_signed_invoice_returned",
                    "type": "date",
                },
                {
                    "label": "Date submitted:",
                    "name": "date_submitted",
                    "type": "date",
                },
                {
                    "label": "Notes:",
                    "name": "notes"
                }
        ]
    } );

    // Activate an inline edit on click of a table cell
    $('#example').on( 'click', 'tbody td:not(:first-child)', function (e) {
        editor.inline( this );
    } );

    $('#example').DataTable( {
        "dom": "Bfrtip",
        buttons: [
            'copy', 'csv', 'excel', 'pdf', 'print'
        ],
        "order": [[0, 'desc' ]],
        "ajax": {
         url: '/invoices/invoice/',
         dataSrc: '[]'
        },
        "columns": [
            { "data": "invoice_number" },
            { "data": "bill_name" },
            { "data": "ordered_by" },
            { "data": "job_type" },
            { "data": "well_name" },
            { "data": "contractor" },
            { "data": "creation_date" },
            { "data": "invoice_office_code" },
            { "data": "invoice_total" },
            { "data": "date_sent_for_signature" },
            { "data": "method_sent" },
            { "data": "person_sent_with_invoice" },
            { "data": "date_signed_invoice_returned" },
            { "data": "date_submitted" },
            { "data": "notes" },
        ],
        select: {
            style:    'os',
            selector: 'td:first-child'
        },
    } );
     } );
</script>

Here is my the response from the server:

[{"id": 4, "invoice_number": 115155, "bill_name": null, "ordered_by": null, "job_type": null, "well_name": null, "contractor": null, "creation_date": null, "invoice_office_code": null, "invoice_total": null, "date_sent_for_signature": "2018-01-01", "method_sent": "SAL", "person_sent_with_invoice": "dmckim", "date_signed_invoice_returned": "2018-01-02", "date_submitted": "2017-01-03", "notes": "this certainly doesn't seem to be working", "is_void": null, "is_paid": null}]

The column I updated in this example is 'notes': 'this certainly doesn't seem to be working'. The database updates but the page will remain the same with no errors.

I used to have <tfoot> but when I hit print it didn't become include print view so I decided to move my table footer tr into <tbody> to get print view but somehow still I cant get my tr's into my print view except first one

 <tbody>

//first tr (include print view)
            <tr>
              <td>xxxxxx</td>
            </tr>

//second tr (not included print view)
            <tr>
              <td>xxxx</td>
            </tr>
//third tr (not included print view)
            <tr>
              <td>xxxxxxxxxxx</td>
            </tr>

  </tbody>

here is my java code:

<script type="text/javascript">
$(document).ready(function() {
  $('table.print').DataTable( {
      dom: 'Bfrtip',
      paging: false,
      bFilter: false,
      ordering: false,
      searching: false,
      bInfo: false,
      buttons: {
        buttons: [
          {
                extend:    'print',
                text:      '<i class="fa fa-print"></i> print',
                titleAttr: 'print',
                className: 'btn-theme02 btn-sm',
                title: '',
                customize: function ( win ) {
                    $(win.document.body)
                        .css( 'font-size', '10pt' )

                    $(win.document.body).find( 'table' )
                        .addClass( 'compact' )
                        .css( 'font-size', 'inherit')
                        .css( 'width', '550px' )
                        .css( 'text-align', 'center' );

                    $(win.document.body).find( 'table, th, td' )
                        .css( 'border-color', 'green' );

                    $(win.document.body).find( 'table, th' )
                        .css( 'color', 'green' )
                        .css( 'text-align', 'center' );

                    $(win.document.body).find( 'table, td' )
                        .css( 'color', 'black' );
                }
          }
        ]
    }

  });

  table.buttons().container()
        .appendTo( '#example_wrapper .col-sm-6:eq(0)' );

});
</script>

This is the video what currently happening
https://youtu.be/dE9j3LrSTPI
Normally initialize still working just fine but look like the event handler not working inside boostrap popover

Hi, I have some products data in datatable which have generated barcode by jsbarcode. I'm using modal form to add new product. After modal hide, other data draw successfully, but not the barcode. The barcode requires page refresh to draw. How to draw the barcode without refreshing page?

Also I put export to excel and print button, but the barcodes are not loaded. How to make it appear when I export and print the table?

I've been trying to get this to work for two days. I don't even see it show up from the examples page here. Is this feature still available? Everything works in the following line of code except the messageBottom,

buttons: [{extend: 'excel', text: '<img src="../images/toolbar/excel-icon.jpg" width="32px" height="32px"/>', title: 'Modifier Analysis', footer: true, messageBottom: '99 codes'}]

I am trying to sort my table when I click in its date column having format "dd/mm/yyyy" but the table is sorted only by date"dd". How do I fix this?

When I click the next button to see next page then click my view and history button to show data nothing shows from DB? I uploaded index.php and image of my page.

Hi everyone,

I have a really strange case where I'm not sure if I'm doing something wrong or if this really is the expected API behaviour.

I instantiate two DataTables on the same page using the same ajax url but different parameters (ajax data). Upon refreshing both tables at a later time using ajax.reload() on each of them, both do exactly the same ajax call - namely using the parameters of the second DataTable.

Here is the code i use:

$("#firstTableId").DataTable({
    ajax : {
        "url": "/myurl",
        "data":
            function( data ) {
                return $.extend( {}, data, {
                    "myParameter": self.getCurrentParameter()
                });
            }
    }
});

The second table is created using the same code, just with a different id (#secondTableId) and gets a different value of self.getCurrentParameter().

Now, when i try to reload the first table via $("#firstTableId").DataTable().ajax.reload();, it does an ajax call using the self.getCurrentParameter() value of the second table.

So it seems to me, only the latest ajax call will be remembered. Even for different DataTable instances. Is this an expected behaviour or am I doing something wrong? Thanks in advance for your help!

Can I programmatically check the options of a select field?
e.g. whether the options are equal to an empty array?
https://editor.datatables.net/reference/field/select