DataTable do not expand/cover page (KnockOutJS combined)

May 24, 2016, 3:04 am

≫ Next: Dynamic Column using handler

≪ Previous: Import data from from firebase to datatables.

$

0

0

Hi,

I'm using extensively DataTables in combination with KnockOutJS to create dynamic and responsive functionality, and am really happy with it except some issues I'm experiencing. The page I'm working on lies here: http://www.san-soft.com/sansoftcrm, (dpesios, test) the problems are located in pages where tables are rendered (for example, in retrieve products page).

The rendering is not done correctly and, I think, it has something to do with DataTables (sometimes items do not appear at all or duplicated). To be more precise, table headers do not expand as expected and table does not cover the whole page (that is the tab). Can please someone take a look and guide me to correct these issues ?

I'm really new with Javascript technologies and KnockOutJS. If my explanation is not quite clear, please feel free to make questions.
Thank you in advance.

---

Dynamic Column using handler

May 29, 2016, 5:03 am

≫ Next: Two tables tab...search takes both tables

≪ Previous: DataTable do not expand/cover page (KnockOutJS combined)

$

0

0

Hi,

Can somebody help me to modify the code so that i don't have to specify column name in my script & Html Table and whatever is returned by my handler(EmployeeDataHandler.ashx) is bind to table.

<link href="Content/DataTables/css/jquery.dataTables.min.css" rel="stylesheet" />
<script type="text/javascript">

    $(document).ready(function () {
        $('#datatable').DataTable(
            {
                columns: [
           { 'data': 'Id' },
           { 'data': 'FirstName' },
           { 'data': 'LastName' },
           { 'data': 'Gender' },
           { 'data': 'JobTitle' },
                ],

                bServerSide: true,
                sAjaxSource: 'EmployeeDataHandler.ashx'
            }

            );
    });

</script>

Id	First Name	Last Name	Gender	Job Title

Two tables tab...search takes both tables

May 28, 2016, 8:04 am

≫ Next: Date Format

≪ Previous: Dynamic Column using handler

$

0

0

I'm using datatables with tabs for two tables. (serverside data)
It seems to work.
But the search field looks likes it's searching in both tables together.
The pre-search doesn't work at all.
Can someone help please?

http://pctraverse.nl/DataTables-1.10.11/examples/server_side/simpleD.html

      $('a[data-toggle="tab"]').on( 'shown.bs.tab', function (e) {
            $.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust();
        } );
               .
               .
               .
       // Apply a search to the second table for the demo
    $('#exampleB').DataTable().search( 'melting' ).draw();

Date Format

May 29, 2016, 1:24 pm

≫ Next: Column visibility issue in Responsive Datatable

≪ Previous: Two tables tab...search takes both tables

$

0

0

How can I filter column 'created at' in the example below?

http://datatables.yajrabox.com/eloquent/carbon

I would like to filter using the format 'Y/m/d'.

Column visibility issue in Responsive Datatable

May 29, 2016, 5:37 pm

≫ Next: Export Column Data as hh:mm:ss

≪ Previous: Date Format

$

0

0

I am toggling a Datatable column based on some condition. But it doesn't work as per the expectations. When i hide column and go to next page the column shows up there.
I am using
https://cdn.datatables.net/responsive/2.1.0/js/dataTables.responsive.js
https://cdn.datatables.net/responsive/2.1.0/css/dataTables.responsive.css"

Below is the sample code

$("#emp").click( function()
{
otable.fnFilter('Employee');
otable("aoColumns": [{"bVisible": false},null,null,null]), /* How to use this here?????
//$('tr td:nth-child(4),th:nth-child(4)').hide(); since above code didn't work i tried to use this but this didn't work either
$('#example thead #nonid').text("Employee ID");

});

Thanks in advance

Export Column Data as hh:mm:ss

May 30, 2016, 3:58 am

≫ Next: truncate text and in the same time show in a tooltip full text

≪ Previous: Column visibility issue in Responsive Datatable

$

0

0

In DataTables, is there any way to export Excel data as time (00:00:00) so the end user can have SUM of selected rows?

Normal Excel export: http://i.stack.imgur.com/woP3m.png

Desired Excel export: http://i.stack.imgur.com/URVxv.png

I have asked this question here too: http://stackoverflow.com/questions/37399207/datatables-excel-export-data-as-time-format

truncate text and in the same time show in a tooltip full text

May 28, 2016, 10:57 am

≫ Next: datatables-plugins v1.10.12?

≪ Previous: Export Column Data as hh:mm:ss

$

0

0

How can I truncate my comments cells (one column), and in the same time, to insert a tooltip which show full text of that truncated text?

I've tried only to truncate text, and in my tooltip is shown truncated text..

[code]

@foreach (var item in Model) { }

@Html.DisplayNameFor(model => model.ShortDate)	@Html.DisplayNameFor(model => model.ClientName)	@Html.DisplayName("Type")	@Html.DisplayNameFor(model => model.ProjectValueHr)	@Html.DisplayNameFor(model => model.ProjectValueMoney)	@Html.DisplayNameFor(model => model.CommentPipeline)	@Html.DisplayName("Owner")	@Html.DisplayNameFor(model => model.JobStatusName)	@Html.DisplayName("Modified By")	@Html.DisplayNameFor(model => model.ModifiedTimeStamp)	@Html.DisplayName("Created By")	@Html.DisplayNameFor(model => model.LostComment)	Options
@Html.DisplayFor(modelItem => item.ShortDate)	@Html.DisplayFor(modelItem => item.ClientName)	@Html.DisplayFor(modelItem => item.NameFCO)	@Html.DisplayFor(modelItem => item.ProjectValueHr)	@Html.DisplayFor(modelItem => item.ProjectValueMoney)	@Html.DisplayFor(modelItem => item.CommentPipeline)	@Html.DisplayFor(modelItem => item.FullName)	@Html.DisplayFor(modelItem => item.JobStatusName)	@Html.DisplayFor(modelItem => item.FullName)	@Html.DisplayFor(modelItem => item.ModifiedTimeStamp)	@Html.DisplayFor(modelItem => item.ShortDate)	@Html.DisplayFor(modelItem => item.LostComment)	Edit More

function strtrunc(str, max, add) { add = add || '...'; return (typeof str === 'string' && str.length > max ? str.substring(0, max) + add : str); }; $(document).ready(function () { 'use strict'; t = $('#example').DataTable({ "bProcessing": true, "bStateSave": true, "iDisplayLength": 10000, dom: 'Bfrtip', 'columnDefs': [ { 'targets': 5, 'render': function(data, type, full, meta){ if(type === 'display'){ data = strtrunc(data, 20); } return data; } } ], "fnCreatedRow": function (nRow, aData, iDataIndex) { $(nRow).children("td").css("overflow", "hidden"); $(nRow).children("td").css("white-space", "nowrap"); $(nRow).children("td").css("text-overflow", "ellipsis"); }, buttons: [ 'copy', 'csv', 'excel', 'pdf', 'print', 'colvis', { text: 'Create', action: function (e, dt, node, config) { alert('Button activated'); $('#createViewModal').modal('show'); } } ] });

[/code]

datatables-plugins v1.10.12?

May 30, 2016, 3:39 am

≫ Next: freeware is not availbale for inline editable js?

≪ Previous: truncate text and in the same time show in a tooltip full text

$

0

0

Hello,

I saw the new "datatables" version 1.10.12 has been released recently, but the "datatables-plugins" package remains of 1.10.11 (though there are few fixes available on top).

Is "datatables-plugins" 1.10.12 coming soon, or we shouldn't wait for it?

Thank you,
Artem

P.S. Thank you for the great plugin - I'm a big fan of it for last 5 years.

---

freeware is not availbale for inline editable js?

May 30, 2016, 3:04 am

≫ Next: TypeError: $.fn.dataTable.colvis is not a constructor

≪ Previous: datatables-plugins v1.10.12?

$

0

0

When I tried to add the editable js with my project, is access denied beacuse of it's not freeware? any other way to make my data table as editable?

TypeError: $.fn.dataTable.colvis is not a constructor

May 30, 2016, 12:27 am

≫ Next: How to have Datatable adapt to changing width

≪ Previous: freeware is not availbale for inline editable js?

$

0

0

I did as your answer but It still get same error.

Does it support server-side ?

jQuery(document).ready(function(){
oTable = jQuery("#mytable").DataTable( {
    "dom": 'R<"#titrePlaceholder"><"H"lfr>t<"F"ip>',
    "jQueryUI": true
});
    var colvis = new jQuery.fn.dataTable.ColVis( oTable, {
            "buttonText": "Aff./Cacher Col",
            "exclude": [ 11 ],
            "activate": "mouseover",
            "overlayFade": 1000,
            "restore": "Conf.Initale",
            "showAll": "Affiche tout"
    } );
    jQuery( colvis.button() ).insertAfter('#titrePlaceholder');
});

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

How to have Datatable adapt to changing width

May 28, 2016, 12:46 am

≫ Next: How to display empty datatable on page load with input boxes

≪ Previous: TypeError: $.fn.dataTable.colvis is not a constructor

$

0

0

I have a table in which i have some data and have applied DataTable plugin sorting to it and it is working well, the layout of my page is that it is divided in two sections left bar(20%) and right bar(80%),left bar contains a collapse button and right side contains the actual table , what is happening is that initially my table renders fine as i have applied width on the header and body on the table and both header and body of the table is in sync and as soon as i click the collapse button which what it does is make the left bar width 1% and shift the right bar width 99%,but it make the header and the body misaligned to each other and they does not appear to be in sync , what i need is that when i click on the collapse button table adapts to the new width , how can i do that do i have to render the datatable gain but i dont want to lose any filter applied on the datatable, in short i want to take datatable and make it take the new width on header and body,

How to display empty datatable on page load with input boxes

May 30, 2016, 6:27 am

≫ Next: Responsive + Select : expanding or collapsing rows toggles selection.

≪ Previous: How to have Datatable adapt to changing width

$

0

0

Hi,

I want to develop a functionality in which when user loads a page I have to display empty datatable with input type="text" in all the related columns. Now user can add in his data in all the columns and rows and will click on Submit. Once it is submitted, I want to take whole data and pass it to serverside.

Is this feasible to develop? If so, any links how this can be done?

Responsive + Select : expanding or collapsing rows toggles selection.

May 30, 2016, 7:03 am

≫ Next: How to insert Data in the datatable filter

≪ Previous: How to display empty datatable on page load with input boxes

$

0

0

The issue was pointed out in 2014 with TableTools, but the discussion is long closed, and I couldn't find a fresher thread:
https://datatables.net/forums/discussion/22822/bug-row-is-selected-when-i-open-the-detail-row-using-responsive-with-tabletools

I am using Responsive 2.1.0 and Select 1.2.0 and the behaviour is exactly the same:
"make the window small enough to show the Responsive control and then the row is selected as the control is toggled."
http://editor.datatables.net/examples/simple/responsive.html

Is something wrong with my setup? Or is this the expected behaviour?

How to insert Data in the datatable filter

May 30, 2016, 7:19 am

≫ Next: editor is not defined ?

≪ Previous: Responsive + Select : expanding or collapsing rows toggles selection.

$

0

0

Hello

On a site I am working on I have a data base with addresses. These addresses are being displayed as a table at the front end according to categories. To find data in big tables I use datatable which works very good.

Now I'd like to insert search terms into the filter that come from the search function of the CMS I am using. The following code does exactly what I want, but it seems like it doesn't execute the filter. This is my code:

jQuery(document).ready(function () {
            $("#myTable").DataTable( {
    paging:   true,
    lengthChange: false,
    pageLength: 5,
    pagingType: "simple_numbers",
    info: false,
    responsive: true,
    language: {
            search: "_INPUT_",
                            zeroRecords:    "Ihre Suche ergab kein Resultat<br>Votre recherche n'a pas reçu des resultats",
            searchPlaceholder: "Tabelle filtern nach … / filtrer le tableau pour …",
            paginate: {
                           previous: '‹',
                           next:     '›'
                    },
                          aria: {
                          paginate: {
                          previous: 'Previous',
                          next:     'Next'
                         }
                }
     }
    });

And after this I use the following code to insert the search term into the filter:

$(function() {
$.urlParam = function(name) {
var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
if(results==null) {
return null;
} else {
return results[1] || 0;
}
};
var searched = $.urlParam('searched');
if(searched){
$('#myTable_filter input').val(searched);
}
});
});

What do I have to do that the filter executes and the table shows only rows with the search term in it?

Thanks for help.

editor is not defined ?

May 30, 2016, 6:58 am

≫ Next: Datatables in multiple divisions

≪ Previous: How to insert Data in the datatable filter

$

0

0

I've included all the file, it says editor is not defined? I s this been discussed with some one already? is this solved?
here is my order

https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.js
jquery-ui.js
jquery.dataTables.min.js
dataTables.buttons.min.js
dataTables.select.min.js
dataTables.editor.min.js
Editor-1.5.6/js/dataTables.editor.js
custom.js

---

Datatables in multiple divisions

May 30, 2016, 7:47 am

≫ Next: ajax.reload() - Responsive plugin

≪ Previous: editor is not defined ?

$

0

0

I want to initialize an unique DT but want to show it in at least 2 different divisions.
Something like this: http://postimg.org/image/553h7tv1n/

Is that possible?

ajax.reload() - Responsive plugin

May 30, 2016, 12:20 am

≫ Next: Assigning json data to datatable after initialization

≪ Previous: Datatables in multiple divisions

$

0

0

Hello,

I am using datatables with the responsive plugin, and all functions well. Except for when I use ajax.reload() to load different data into the table.

Because the data is different, so to are column sizes. However datatable's responsive plugin doesn't accommodate this. causing a horizontal scrollbar to appear under certain circumstances.

    table = $('#active-issues').DataTable({
        "scrollY": pixels,
        "dom": '<"top"if>rt<"bottom"><"clear">',
        "paging": false,
        "responsive":true,
        "bProcessing": true,
        "ajax": {
            "data": function(){
                id = (id == 'none' ? '' : id);
                customer_id = ($('.customer-selection').val() == 'all' ? '' : $('.customer-selection').val());
                $('#active-issues').DataTable().ajax.url("api/issues/?dashboard_id=" + id + "&customer_id=" + customer_id);
            },
            "dataSrc": function (json) {
                if(typeof json['status'] != "undefined") {
                    if (json['status'] == 'forbidden') {
                        $('#session-error-modal').modal('show');
                    }
                }
                return json;
            }
        },
        columns: [
            { responsivePriority: 1 },
            { responsivePriority: 2 },
            { responsivePriority: 4 },
            { responsivePriority: 7 },
            { responsivePriority: 3 },
            { responsivePriority: 6 },
            { responsivePriority: 5 },
            { responsivePriority: 8 }
        ],
        "order": [
            [ 6, 'asc' ],
            [ 0, 'asc' ],
            [ 3, 'desc' ]
        ],
        "columnDefs": [
            { "type": "alt-string", targets: 6 },
            { "type": "alt-string", targets: 7 }
        ],
        language: {
            "searchPlaceholder":"Zoeken",
            "search":"",
            "info":"_TOTAL_ problemen",
            "infoEmpty": "0 problemen",
            "infoFiltered":"(gefilterd vanaf _MAX_ problemen)"
        }
    });

Assigning json data to datatable after initialization

May 27, 2016, 12:00 pm

≫ Next: How do I put an AJAX result in the 'render' section of a column?

≪ Previous: ajax.reload() - Responsive plugin

$

0

0

Hi
I am trying to assign json data to datatable after initialization. I have json data in this format
[{
"id": "58",
"country_code": "UK",
"title": "Legal Director",
"pubdate": "2012-03-08 00:00:00",
"url": "http://..."
},{
"id": "59",
"country_code": "UK",
"title": "Solutions Architect,",
"pubdate": "2012-02-23 00:00:00",
"url": "http://..."
},{
// ....more of the same......
}]

========
my code is

//initialization goes here
$(document).ready(function() {
if ($('#data-table').length !== 0) { $('#data-table').DataTable({ responsive: true }); }
} );

//after DB operation assign json data to table by calling this function

function fillTheDataTable(dataTableId,data)
{
dataTableId = "#"+dataTableId;
console.log(data);

        table = $(dataTableId).dataTable({
                "aaData": data,
                "aoColumns": [
      { "mDataProp": "id" },
    { "mDataProp": "country_code" },
    { "mDataProp": "title" },
    { "mDataProp": "pubdate" },
    { "mDataProp": "url" }
                             ],
                "retrieve": true
                });
}

I am doing add/edit/delete operation through AJAX request and the .php file is giving me data in json format that i am trying to set to datatable by calling fillTheDataTable function.

However its not being assigned. Any comments/help/concern will be appreciated.

TIA.

How do I put an AJAX result in the 'render' section of a column?

May 30, 2016, 9:45 am

≫ Next: Jquery DataTable invalidate() doesn't work for row that have been added dynamically

≪ Previous: Assigning json data to datatable after initialization

$

0

0

I have a table that gets data added to it based on user selection, and in the render section of a column I want to make an AJAX request to check the status of the row added to the table. Right now I have:

columns: [
    ...
    {
        data: objectID,
        render: function (data, type, full, meta) {
            return $.ajax({
                url: '/api/CheckStatus?objectID=' + data
            }).done(function (data) {
                return data.toString()
            });
        }
    },
    ...
]

which obviously just displays "[object Object]" since it's just returning the AJAX object. Is there a way to have the 'render' portion of a column do this?

Jquery DataTable invalidate() doesn't work for row that have been added dynamically

May 30, 2016, 1:07 am

≫ Next: Display both exporting options and page length.

≪ Previous: How do I put an AJAX result in the 'render' section of a column?

$

0

0

Hello, I'm using the JQuery plugin DataTable, I have a button which allows to the user to add an empty row. Also, all my cells are editable when you double-click on (I made my own function).

When the user double click on a cell, he can edit the cell, and to save the content, the user has to click out the cell. To do that, I call a function when the cell lose the focus that call the .invalidate() method of datatable see here (invalidate function) to tell to datatable to refresh the cache with the DOM, so the filter will be able to find the new data added in the table.

But for dynamically added rows that doesn't work, in fact calling the .invalidate() function causes an issue, the content of the cell is cleared.

Here my codepen.io :http://codepen.io/robert91/pen/wWwmeE

Thank you for your help !