Quantcast
Channel: Recent Discussions — DataTables forums
Viewing all 79327 articles
Browse latest View live

orthogonal and data-order not working together

0
0

have a set of "columns": [
{ "data": "Status" },
{ "data": "Location" },
{ "data": "Entity" },
{ "data": "Date" },
],

have set a data-order tag for the Date field

              <TD align="center" class="StdText" data-order=<!$MG_ORDER_DATE_SORT>><!$MG_DATE></TD>

viewing the source shows the tag value in YYYYMMDD format

              <TD align="center" class="StdText" data-order=20120113>01/13/2012</TD>

sadly the sort does not work. it sorts as per the displayed date which is MM/DD/YYYY

When I delete the "columns": section from the html the sort works, but then, I need that definition for the purpose of export..

what do I need to do, to make the sort work?

I have other reports with data-order tags for date fields and the sorting works fine, but those reports do not have the orthogonal data definition.

Thanks

Idris


Fixed Header showing up after leaving the view

0
0

Fix Header coming on other tables:

Fix header coming on other Views:

My Directive:

          angular.module('datatable.directive', [])
          .directive('datatable', function ($compile) {
            return {
        scope: {
            dtData: '=',
            dtColumns: '=',
            dtSort: '=',
            dtDirection: '=',
            dtFilter: '=',
            dtPagination: '=',
            dtFixed: '='
        },
        transclude: true,
        controller: function($scope, $location) {
            $scope.navigateToListing = function(id) {
                $location.path('/seller/listing/management/' + id);
            };
        },
        link: function (scope, elem, attrs, ctrl) {
            var pagination = true;
            if( attrs.dtPagination == 'no' ) {
                pagination = false;
            }
            $.fn.dataTable.ext.errMode = 'throw';
            $(elem).dataTable({
                bFilter: true,
                data: scope.dtData,
                columns: scope.dtColumns,
                language: {
                    search: '',
                    searchPlaceholder: 'Search'
                },
                createdRow: function ( row, data, index ) {
                    // $(row).attr('ng-class', '{selected: selectedRow['+data.id+']}');
                    $compile(row)(scope.$parent);
                },
                initComplete: function() {
                    var thead = elem.find('thead tr');
                    var ix = 0;
                    var columns = this.api().init().columns;
                    this.api().columns().every( function () {
                        if(!columns[ix].uniqueFilter) {
                            ix++;
                            return;
                        }
                        var column = this;
                        var th = elem.find('thead tr th').eq(ix);
                        var title = columns[ix].sTitle;
                        var select = $('<select class="form-control input-sm"><option value="">' + title.toUpperCase() + '</option></select>');
                        select.on( 'change', function (ev) {
                            var val = $.fn.dataTable.util.escapeRegex(
                                $(this).val()
                            );

                            column
                                .search( val ? '^'+val+'$' : '', true, false )
                                .draw();
                        } );
                        select.on('click', function(ev) {
                            ev.stopPropagation();
                        });
                        select.appendTo(th.empty());

                        column.data().unique().sort().each( function ( d, j ) {
                            select.append( '<option value="'+d+'">'+d+'</option>' );
                        } );
                        ix++;
                    } );
                    if(scope.dtFilter) {
                        var table_id = $(this).attr('id');
                        $("#" + table_id + "_filter").appendTo("#" + scope.dtFilter);
                        $("#" + table_id + "_filter").find("input").first().removeClass("input-sm");
                    }
                },
                lengthChange: false,
                order: scope.dtSort == 'NONE' ? []: [[scope.dtSort || 0, scope.dtDirection || 'desc']],
                paging: pagination,
                fixedHeader: scope.dtFixed == true ? true : false

            });
        }
    };
});

My Controller:

     angular.module('reports.controller', [])
        .controller('ReportsCtrl', ['API_URL', '$scope', '$route', '$location', 'SessionSvc', 'ReportSvc', '$analytics', 
        'CacheFactory', 'ngDialog', '$filter',
        function (API_URL, $scope, $route, $location, SessionSvc, ReportSvc, $analytics, CacheFactory, ngDialog, $filter) {

        $scope.API_URL = API_URL;
        $scope.state = {};
        $scope.state.dtFilterField = 'filter_target';
        $scope.loading = false;

        ReportSvc.getReports().then(function (resp) {
            var reports_var = resp.data.data;
            $scope.reports = _.groupBy(reports_var, 'category');

        });

        $scope.getReport = function (rpt_key, rpt_name) {
            $scope.state.selectedReport = rpt_name;
            $scope.state.values = {};
            $scope.loading = true;
            $scope.error = "";
            ReportSvc.get(rpt_key).then(function (resp) {
                $scope.loading = false;
                $scope.state.reportName = resp.data.data.name;
                $scope.state.reportKey = resp.data.data.key;
                if( resp.data.data.error ) {
                    $scope.error = resp.data.data.error;
                }
                else {
                    $scope.state.reportDesc = resp.data.data.description;
                    $scope.state.colNames = resp.data.data.cols;
                    $scope.state.values = resp.data.data.values;
                    var colSpec = [];
                    _.each($scope.state.colNames, function (colName) {
                        var spec = {'title': colName.replace(/_/g, ' ')};
                        if (reportParams[rpt_key] && reportParams[rpt_key]['colSpec'][colName]) {
                            angular.extend(spec, reportParams[rpt_key]['colSpec'][colName])
                        }
                        colSpec.push(spec)

                    });
                    $scope.state.dtColumns = colSpec;
                }
            }, function(resp) {
                alert("Error running report.")
            });
        };


        var reportParams = {};
        reportParams['TEST'] = {
            'colSpec': {
                'company_name': {'uniqueFilter': true},
                'listing_id': {
                    'render': function (data, type, full, meta) {
                        return '<a ng-href="/listing_details/' + data + '">' + data + '</a>';
                    }
                }
            }
        };

        var sessionCache = CacheFactory.get('sessionCache');
        $scope.$on('$routeChangeStart', function (next, current) {
            sessionCache.put('reportContext', $scope.state)

        });
        if (sessionCache.get('reportContext')) {
            $scope.state = sessionCache.get('reportContext');
        }
    }]);

My Html:

                <ul class="dropdown-menu">
                     <li ng-repeat="report in names">
                          <a href ng-click="getReport(report.key, report.name)">{{ report.name }}</a>
                      </li>
                 </ul>

               <table style="width:100%" class="table table-bordered" dt-fixed="true" dt-sort="'NONE'" dt-direction="desc" datatable dt-data="state.values" dt-filter="state.dtFilterField"
       dt-columns="state.dtColumns" dt-pagination="no">
               </table>

targets : '_all' not working on some columns

0
0

I want to add bootstrap class "align-middle" to all the cells. In general it woks fine but I just awared that there're some cells in which it doesn't work. I don't know if it's just a coincidence or not but the cells in where it doesn't work has numbers as content. In that cells the class hasn't be applied.

    "columnDefs": [
        {
            targets : '_all',
            className : 'align-middle'
        }
    ]

Any ideas about this behaviour?

My apologize about the english level.

Thanks in advance!! :smile:

litedb

Problems with NOWRAP and child row with when I enable responsive table

0
0

I have added child rows from the example https://datatables.net/examples/api/row_details.html . Now I want to add responsive to the table. I have a problem that when I show the child row, the table is way to wide even for the container. I thought maybe there was some configuration problem but notice that when I remove "nowrap" from the table it is fine. But then the responsive does not work. When I have table class="display responsive nowrap" any long text in a TD in child row breaks the width. Is there a way to fix this?
Here is closed: https://www.screencast.com/t/OQrJtrus3Bc
Here it is opened: https://www.screencast.com/t/WOMclzely

select2 as first field does not show focus

0
0

reference http://live.datatables.net/danosiyo/1/edit

I have a similar form in my application, with select2 as first field and date as 2nd field. I would like the first field to be focused, but don't see the easy way to do this. The calendar pop-up is a bit jarring when the form is displayed, and the user has to manually click on the first field.

I tried following suggestion in https://editor.datatables.net/reference/api/field().focus() comment to no avail. Not sure best way to put in form-options as you suggest. Shouldn't there be editor initialization option which defines focus? I think this is select2 anomaly because when I tried just type:'select' the focus defaulted to the first field as expected.

editor.on('open', function() {
    editor.field( 'position' ).focus();
});

How to change data displayed in editor

0
0

I store price in the database as an integer as cents. For example, if a user enters $4.56, I store 456 in the database. I have figured out how to render that in the datatable but I can't figure out how to modify the value in the form so that when the edit form opens, it doesn't display 456, but 4.56. I have set the preInit, preEdit events and they aren't called when the edit button is pressed. On the presubmit, I do the rendering and multiply the result entered by 100 so the correct amount is stored. That works. How do I transform that in the edit form?

datatables.net node.js editor example won't run with oracledb through knex

0
0

I'm pilot testing datatables for my company, and I'm able to run the editor/node.js example with mysql running locally on my machine. All the examples run just fine at https://localhost:8081/examples.

All things being equal, i modify the db.js file to say the following:

let knex = require('knex');

module.exports = knex({
    client: 'oracledb',

    connection: {
        host: 'oracledev',
        user: 'test',
        password: 'test',
        database: 'orcl'
    }
});

And then attempt to run the example with npm start and i get the following output

DataTables Editor demo - navigate to http://localhost:8081/
TypeError: Cannot read property 'replace' of undefined

the line that comes back right after the server starts is TypeError: Cannot read property 'replace' of undefined And the source of that error i'm finding is very difficult to track down.

Please advise!


Custom search entering a value within a range not working

0
0

I have a requirement to search on a specific column for a value within a range. The data within the column is typically of the format 617006, 630002, 753000-753025, 751001, 752001-752003, 755000, 755010 - 755020

In the example above, the user has to be able to search, using the datatables search box, for 753005. I have tried defining my own extension to the search

    $.fn.dataTable.ext.search.push(
        function (settings, data, dataIndex, row, counter) {
      console.log(“In extended search function”);
            var codes = data[5];
            var sSearch = settings.oPreviousSearch.sSearch;
            if (codes.includes(sSearch)) {
                return true;
            }
         // check ranges and return true else return false
            return isInRange(sSearch, codes);
        }
    );

If I try to search for 753005 the function is never called, it seems to be called on initialisation or when the global search finds a value. I would like the extension search to be called after the global search to check to see if the value is within one of the ranges.

I tried using (note: code removed)

$.fn.dataTableExt.afnFiltering.push(
    function (oSettings, aData, iDataIndex) {
        console.log("In afnFiltering pushed function");
            return true;
    }
);

However this has the same behaviour as the search push function.

I have also tried creating a custom type, fmscode, for the column but this is only called on initialisation, never on search and only contains the column data with no extra parameter to get the string to be searched for.

$.fn.DataTable.ext.type.search.fmscode = function (data) {
    console.log("In $.fn.DataTable.ext.type.search.fmscode");
    return isInRange(data, codes);    
};


$('#aTable).DataTable({
    "paging": false,
    "columnDefs": [
        { "type": "fmscode", "targets": 5, "searchable": true, "orderable": false }
    ]
});

I had thought about a hidden column that contained only the values within each range but this could become messy as the ranges can be large.

Does anyone know of a way to achieve this type of search?

Thanks

How to use the methode update of an select field ?

0
0

I try to find an example but i can't find one easy to implement.
I read the documentation https://editor.datatables.net/reference/field/select and try to implement the brendons's example in the bottom of the page.

below this is my code, if someone can help me ? why when i select update the combobox is still empty ?

var editor; 
    var table;

    $(function () {

        $('.sidebar-menu').tree();

        var optionsA = [];
        $.getJSON("LookupStatus", {
            term: "-1"
        },
            function (data) {
                var option = {};
                $.each(data, function (i, e) {
                    option.label = e.text;
                    option.value = e.id;
                    optionsA.push(option);
                    option = {};
                });
            }
        ).done(function () { editor.field('statut').update(optionsA); });

        editor = new $.fn.dataTable.Editor({
            ajax: {
                url: "@Url.Action("DataTableChange", "User")",
                type: "POST"
            },
            table: "#TablePerson",
            i18n: {
                create: {
                    button: "Nouveau",
                    title: "Créer nouvelle entrée",
                    submit: "Créer"
                },
                edit: {
                    button: "Modifier",
                    title: "Modifier entrée",
                    submit: "Actualiser"
                },
                remove: {
                    button: "Supprimer",
                    title: "Supprimer",
                    submit: "Supprimer",
                    confirm: {
                        _: "Etes-vous sûr de vouloir supprimer %d lignes?",
                        1: "Etes-vous sûr de vouloir supprimer 1 ligne?"
                    }
                },
                error: {
                    system: "Une erreur s’est produite, contacter l’administrateur système"
                },
                multi: {
                    title: "Plusieurs valeurs",
                    info: "Les éléments sélectionnés contiennent des valeurs différentes pour cette entrée. Pour modifier et mettre tous les éléments pour cette entrée pour la même valeur, cliquez ou appuyez ici, sinon ils vont conserver leurs valeurs individuelles.",
                    restore: "Annuler les modifications"
                },
                datetime: {
                    previous: 'Précédent',
                    next: 'Premier',
                    months: ['Janvier', 'Février', 'Mars', 'Avril', 'peut', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
                    weekdays: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam']
                }
            },
            idSrc: "id",
            fields: [
                {
                    "label": "Nom:",
                    "name": "nom"
                },
                {
                    "label": "Prénom:",
                    "name": "prenom"
                },
                {
                    label: "Statut:",
                    name: "statut",
                    type: "select", placeholder: "Choisir un statut",
                    //options: [
                    //    "Actif",
                    //    "Inactif"                            
                    //]
                },
                {
                    "label": "Site:",
                    "name": "site"
                },
                {
                    "label": "Fonction:",
                    "name": "fonction"
                },
                {
                    "label": "Manager:",
                    "name": "manager"
                },
                {
                    "label": "Email:",
                    "name": "email"
                }
            ]
        });

        var table = $('#TablePerson').DataTable({

            //dom: "BSlfrtip",
            // l - length changing input control
            // f - filtering input
            // t - The table!
            // i - Table information summary
            // p - pagination control
            // r - processing display element

            dom: "<'row'<'col-xs-5'B><'col-xs-2'l><'col-xs-5'f>>" + "<'row'<'col-xs-12'tr>>" + "<'row'<'col-xs-2'i><'col-xs-10'p>>",
            proccessing: true,
            serverSide: true,
            lengthMenu: [[25, 50, 100, -1], [25, 50, 100, "All"]],
            ajax: {
                url: "@Url.Action("DataTableLoad", "User")",
                type: "POST"
            },
            language: {
                processing: "Traitement en cours...",
                search: "Rechercher&nbsp;:",
                searchPlaceholder: "Saisir ...",
                lengthMenu: "Afficher _MENU_ &eacute;l&eacute;ments",
                info: "Affichage de l'&eacute;lement _START_ &agrave; _END_ sur _TOTAL_ &eacute;l&eacute;ments",
                infoEmpty: "Affichage de l'&eacute;lement 0 &agrave; 0 sur 0 &eacute;l&eacute;ments",
                infoFiltered: "(filtr&eacute; de _MAX_ &eacute;l&eacute;ments au total)",
                infoPostFix: "",
                loadingRecords: "Chargement en cours...",
                zeroRecords: "Aucun &eacute;l&eacute;ment &agrave; afficher",
                emptyTable: "Aucune donnée disponible dans le tableau",
                paginate: {
                    first: "Premier",
                    previous: "Pr&eacute;c&eacute;dent",
                    next: "Suivant",
                    last: "Dernier"
                },
                aria: {
                    sortAscending: ": activer pour trier la colonne par ordre croissant",
                    sortDescending: ": activer pour trier la colonne par ordre décroissant"
                }

            },
            columns: [

                { data: "nom" },
                { data: "prenom" },
                { data: "statut.text" },
                { data: "site.nom" },
                { data: "fonction" },
                { data: "manager.email", defaultContent: "<i>Not set</i>" },
                { data: "email" },   
                { data: null, render: function (data, type, row) {
                        // Combine the first and last names into a single table field
                    return '<a href="Details/' + data.id + '">Detail</a>';
                    }
                }
            ],
            select: true,
            buttons: [
                { extend: "create", text: '<a><i class="fa fa-fw fa-plus"></i>Nouveau</a>', titleAttr: 'Nouveau', editor: editor },
                { extend: "edit", text: '<a><i class="fa fa-fw fa-edit"></i>Modifier</a>', titleAttr: 'Modifier', editor: editor },
                { extend: "remove", text: '<a><i class="fa fa-fw fa-remove"></i>Supprimer</a>', titleAttr: 'Supprimer', editor: editor },
                { extend: 'excel', text: '<a><i class="fa fa-fw fa-file-excel-o"></i>Excel</a>', titleAttr: 'Excel' },
                { extend: 'print', text: '<a><i class="fa fa-fw fa-print"></i>Imprimer</a>', titleAttr: 'Imprimer' }
                                                   ]
        }).on('select', function (e, dt, type, indexes) {

            if (type === 'row') {

                var data = table.rows(indexes).data();

                var send_data = [];

                $.each(data, function (item, index, array) {
                    send_data.push(index);
                });

                // do something with the ID of the selected items

                $.ajax({
                    // edit to add steve's suggestion.
                    //url: "/ControllerName/ActionName",
                    url: "@Url.Action("ItemSelected", "User")",
                    type: "POST",
                    dataType: "json",
                    data: {
                        d: send_data
                    },

                    success: function (data) {
                        // your data could be a View or Json or what ever you returned in your action method
                        // parse your data here
                        alert(data);
                    }
                });
            }
        });
    });

Error: Primary key element is not available in the data set

0
0

I'm not having great success searching for solutions to this issue. Sorry if this question has already been asked.

I am just trying to run the demo on Oracle 12.2c with Node.js. I suspect I have not created the database table correctly, though I've followed this as closely as I can. I do have some trouble creating the primary key insert trigger, and have to do it through a GUI to get it to run properly. (I think all its missing is referencing old as old new as new in the trigger creation code, though that seems like a ridiculous necessity). so it looks like this

create or replace trigger datatables_demo_on_insert 
before insert on datatables_demo 
referencing old as old new as new 

for each row
begin
SELECT datatables_demo_seq.nextval
        INTO :new.id
        FROM dual;
end;

But other than that, I merely wrap the dates on the insert statements in a to_date() function, and run the SQL exactly as is in the setup guide linked above. But I keep getting this node error when attempting to pull up any of the example pages.

Unhandled promise error:  [object Promise]Error: Primary key element is not available in the data set
stack: Error: Primary key element is not available in the data set
    at Editor.pkeyToValue (C:\Users\Mike\dev\db_editor\node_modules\datatables.net-editor-server\dist\editor.ts:688:11)
    at Editor.<anonymous> (C:\Users\Mike\dev\db_editor\node_modules\datatables.net-editor-server\dist\editor.ts:1072:38)
    at step (C:\Users\Mike\dev\db_editor\node_modules\datatables.net-editor-server\dist\editor.js:42:23)
    at Object.next (C:\Users\Mike\dev\db_editor\node_modules\datatables.net-editor-server\dist\editor.js:23:53)
    at fulfilled (C:\Users\Mike\dev\db_editor\node_modules\datatables.net-editor-server\dist\editor.js:14:58)

Any help would be appreciated!

Angular 5 DataTables Plugin - How to pass selection data from HTML in TypeScript function call

0
0

I am using SmartAdmin Angular 5 framework 1.9.1, which provides DataTables capabilities. I have installed DataTables 1.10.18, and Select 1.2.6.

I have the following component.html code, showing only the sa-datatables plugin usage"

<sa-datatable
  [options]="{
    data: sysMsgs,
    columns: [
      {data: 'checked'},
      {data: 'rowid'},
      {data: 'senderID'},
      {data: 'message'},
      {data: 'dateCreated'}
    ],
    buttons: [ 'copy', 'csv', 'pdf', 'print',
      {
        extend: 'selected',
        text: 'Delete',
        action: handleDelete()
      }
    ],
    columnDefs: [
      {
        targets: 0,
        orderable: false,
        className: 'select-checkbox'
      },
      {
        targets: [2],
        visible: true
      }
    ],
    select: {
      style: 'os',
      selector: 'td:first-child'
    },
    order: [[ 1, 'asc' ]],
    searching: true,
    search: {
      smart: false                  
    }               
  }"
  tableClass="table table-striped table-bordered table-hover">
    <thead>
      <tr>
        <th data-hide="mobile-p">Select</th>
        <th data-hide="mobile-p">ID</th>
        <th data-hide="mobile-p">Sender</th> 
        <th data-hide="mobile-p">Message</th>
        <th data-hide="mobile-p">Date Sent</th>
      </tr>
    </thead>
</sa-datatable>

The datatable that is created works fine. I get the checkboxes, and the Delete button does call function handleDelete(). My problem is not knowing how to pass, or get, the selected rows in the handleDelete() function, which I have defined in component.ts.

The DataTables Editor has a Soft Delete example, using jQuery that defines the selected rows like this:

var rows = table.rows( {selected: true} ).indexes();

I have tried modifying the sa-datatable, like so:

<sa-datatable id='table' name='table'
  [options]="{
...
      action: handleDelete(table.rows( {selected: true} ).indexes())
...
</sa-datatable>

but, it generates a compile error because table is undefined.

Any ideas on how to get a list of selected rows in component.ts?

Thanks,

Bob

Editor form datepicker with month and year only

0
0

How can I set the option of a datatable editor form with type datetime so that the datepicker have month and year only as shown in the below screen capture? thx

Validate comma as numeric in Editor

0
0

Greetings,

I have searched for a solution to a problem i'm having regarding input in Editor.

I want to validate a field as numeric, but want to allow comma as a decimal separator instead the dot that is by default.

From the documentation i found this :
https://editor.datatables.net/manual/php/validation#Numbers

I performed the following code to try, but the numeric validation does not accept the comma as valid :

Field::inst( 'expenses.expenseValue' )
            ->validator( 'Validate::notEmpty', array('message'=> 'É necessário colocar um valor numérico!'))
            ->validator( 'Validate::numeric', array(
                'decimal'=> ',',
                'message'=> 'É necessário colocar um valor numérico!'
            )),

What am i doing wrong ? Does anyone has a working example so i can compare what is my mistake ?

Best Regards,
Pedro

How to add extra options to the "Show entries" listbox ?

0
0

Our database contains thousands rows so the default numbers listed in the "Show entries" is not enough :

So how to add extra options to the listbox ?


Can't Convert editor result to Json

0
0

I'm following the example in https://editor.datatables.net/manual/net/mvc using dotnet core 2.1 but in Visual Studio the "return JsonResult(response);" gives the error "Non-invocable member JsonResult cannot be used like a method". Any ideas what I'm doing wrong?

Tips To choose Proper Malaysian Curly Hair

0
0

Malaysian hair is said to be nice in high quality and softness, and it has certainly an especially luxurious really feel and is sleek with the correct amount of shine. It blends correctly with majority of those varieties together with some African-American. The Malaysian hair is taken into account to be the perfect with regards to human extensions. Such sort of product is all the time in priority record when it comes to those extension merchandise. Sharing varied benefits with Malaysian, European with people who are interested to buy tender and shiny extensions.

The mentioned type of products are extensively accessible in both curly and straight, so it could actually simply satisfy numerous vital calls for of individuals. Malaysian curly hair is completely different from Indian hair. Once you shampoo it, the hair might have indeed a slight wave, however its texture is meant to stay straight with numbers of body and bounce.

There are numbers of brands providing Malaysian extensions in different international locations. Irrespective of which type of Malaysian hair extension you select, you want to make sure that the bought products which are in superior quality. You can follow a number of tips and guidelines if you happen to want to own a high-high quality product.

• It is best to know the hair you wish to purchase. Remy hair is the proper one it's best to simply go for, since it is best than artificial product and likewise several different varieties of human hair. Besides, it makes you pure and absolutely unique with <a href="https://tearfulfever7508.page.tl/The-Top-Secret-Truth-on-Hair-Wigs-Revealed.htm?forceVersion=desktop">Remy hair</a> and also stand out from the crow. There are quite a few benefits for such hair - placing shine, natural luster, lengthy lifespan, less tangling and many extra.

• You should at all times choose a perfect size for yourself. As a substitute of following style, what you should perform is to decide on the best suited size that complements your face form, as well as your body and weight.

• You at all times want to decide on a right type you prefer. There are various people who prefer completely different types. When you consider a fresh fashion, you'll be able to then undoubtedly think about the kind of physique, height and face shape once more. You must at all times ensure the appropriate model that you select will certainly draw attention of others’ curiosity and also be totally comfy for carrying

• It's best to always be sure your pure hair is in an ideal condition. Regardless of which extension you have an interest to decide on, whether or not it is Remy, weaves, or clip-ins, you all the time want to make sure that your hair is fully protected.

Select record in cell when click on it

0
0

Thx for this great product. I have a small issue with an inline edit of a cell and datatables. When i click on a cell in the table, i need to select the record similar to "onfocus="this.select();", in order not having to highlight it with a mouse before editing a single record. Is it possible? (I am saving up for you Editor version, to get it early next yr)

Possible CDN Error - Receiving "Uncaught Editor requires DataTables 1.10.7 or newer" Error Message

0
0

I'm receiving the following error: Uncaught Editor requires DataTables 1.10.7 or newer

This is occurring though I have loaded the Datatables CDN before the JS Editor. Code follows:

The HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
    <title>Filing Cabinet</title>
    
     <?php require '../datatables_update/cdn_css.php';?>

    <link rel="stylesheet" type="text/css" href="../datatables_editor/css/editor.dataTables.min.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="examples/resources/syntax/shCore.css">
    <link rel="stylesheet" type="text/css" href="examples/resources/demo.css">
    <style type="text/css" class="init">
        body {
    background-color: #F7F7F7;
}
    table.right-all td,th{
    text-align :right;
        }
            td.details-control {
            text-align:center;
            color:forestgreen;
    cursor: pointer;
}
tr.shown td.details-control {
    text-align:center; 
    color:red;
}

    </style>
     <?php require '../datatables_update/cdn_js.php';?>

    <script type="text/javascript" language="javascript" src="../datatables_editor/js/dataTables.editor.min.js">
    </script>
    <script type="text/javascript" language="javascript" src="examples/resources/syntax/shCore.js">
    </script>
    <script type="text/javascript" language="javascript" src="examples/resources/demo.js">
    </script>
    <script type="text/javascript" language="javascript" src="examples/resources/editor-demo.js">
    </script>
    
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/plug-ins/1.10.15/api/sum().js">
    </script>

    <script type="text/javascript" language="javascript" class="init">
    
var editor; // use a global for the submit and return data rendering in the examples
 
$(document).ready(function() {
    editor = new $.fn.dataTable.Editor( {

The PHP JS:

<?php

echo'
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jqc-1.12.4/jszip-2.5.0/dt-1.10.18/af-2.3.2/b-1.5.4/b-colvis-1.5.4/b-flash-1.5.4/b-html5-1.5.4/b-print-1.5.4/cr-1.5.0/fc-3.2.5/fh-3.1.4/kt-2.5.0/r-2.2.2/rg-1.1.0/rr-1.2.4/sc-1.5.0/sl-1.2.6/datatables.min.js"></script>
'
    ?> 

The PHP CSS:

<?php

echo'
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.18/af-2.3.2/b-1.5.4/b-colvis-1.5.4/b-flash-1.5.4/b-html5-1.5.4/b-print-1.5.4/cr-1.5.0/fc-3.2.5/fh-3.1.4/kt-2.5.0/r-2.2.2/rg-1.1.0/rr-1.2.4/sc-1.5.0/sl-1.2.6/datatables.min.css"/>
'
?>

The Error Message:

Any idea on how to resolve this???

Thanks!

scrollX does not work

0
0

Hello,

I'm experimenting with DataTable and I'm trying the scrollX example here:

https://datatables.net/reference/option/scrollX

I have attached before and after pics of my table. "scrollX doesn't work.png" shows the issue.

Here's my code:

[code]
$(document).ready(function() {
$('#table_id').DataTable({
paging: false,
scrollY: 100,
scrollX: true
});
[/code]

Viewing all 79327 articles
Browse latest View live




Latest Images