Dynamic iDisplayLength not working

jadhvaryu

Hi All!

I am trying to make iDislayLength work in a scrollY table with columnar filters as second row below the table header.

I face following problems:
1. The columnar filters show up inside the table as 1st row. As soon as i use sorts on any column, the filter fields disappear
2. Without sorting, when i type in any values in the filter fields, no filtering happens
3. The actual table scrollY area shows all the records rather than showing a small window with scrolling capability
4. Also, i get fnSettings() is not a function error message

I am attaching the following portions of the code:
1. Table definition
wrapperHeight = $('.wmtablewrapper').height();
OrderHdrOutputTbl = $('#xWMOrderTable').DataTable({
width: "100%",
// settings for scrollY style
scrollY: wrapperHeight,
scrollX: false,
pageResize: true,
iDisplayLength : 10,
paging: false,
"dom" : '<<t>i>',
// Common settings
lengthChange : true,
responsive : true,
bAutoWidth : false,
"language" : {
"sInfoEmpty" : "No work orders searched ...",
"sEmptyTable" : "No Work Orders searched",
"sInfo" : "Total of TOTAL work orders in the searched..."
},
"columns" : [ {
// "title": "Work Order#",
"data" : "WorkOrderNo",
"orderable" : true,
"className" : "dt-left",
"width" : "8%",
"fnCreatedCell" : function(nTd, sData, oData, iRow, iCol) {
$(nTd).html("<a href='#'>" + oData.WorkOrderNo + "</a>");
}
}, {
"data" : "OrdDescription",
// "title": "Order Description",
"orderable" : true,
"className" : "dt-left",
"width" : "20%"
}, {
"data" : "CustomerName",
// "title": "Customer Name",
"orderable" : true,
"className" : "dt-left",
"width" : "20%"
}, {
"data" : "JobDescription",
// "title": "Job Description",
"orderable" : true,
"className" : "dt-left",
"width" : "20%"
}, {
"data" : "CreateDate",
// "title": "Create Date",
"orderable" : true,
"className" : "dt-left",
"width" : "8%"
}, {
"data" : "ShipDate",
// "title": "Ship Date",
"orderable" : true,
"className" : "dt-left",
"width" : "8%"
}, {
"data" : "ReturnDate",
// "title": "Return Date",
"orderable" : true,
"className" : "dt-left",
"width" : "8%"
}, {
"data" : "OrderStatus",
// "title": "Status",
"orderable" : true,
"className" : "dt-left",
"width" : "8%"
} ]
});

1. Resize logic when window is resized
   // window resize logic
   $(window).resize(function () {
   var wrapperHeight = $('.wmtablewrapper').height();

    var oSettings = OrderHdrOutputTbl.fnSettings();
    oSettings.oScroll.sY = wrapperHeight;
    OrderHdrOutputTbl.fnDraw();
   

   });

2. Logic for making columnar filters
   $('#xWMOrderTable thead tr#xWMOrderTableHdrFilter th').not(
   ":eq(8)").each(
   //
   function() {
   var title = $('#xWMOrderTable tfoot th').eq(
   $(this).index()).text();
   $(this).html(
   '<input type="text" placeholder="Search '
   + title + '" />');
   });
   // Apply the filter
   OrderHdrOutputTbl.columns().eq(0).each(
   function(colIdx) {
   if (colIdx == 8)
   return; // Do not enable search for that column
   $('input',
   OrderHdrOutputTbl.column(colIdx).header())
   .on(
   'keydown keyup change',
   function() {
   OrderHdrOutputTbl
   .column(colIdx).search(
   this.value)
   .draw();
   });
   });

       }
   }
   

---

Thanks in advance.
Jaideep

jadhvaryu

Just adding requirement statement to the question above.

Typical users of the app have large screes 27", 14-15" laptops or tablets.

Based on who is using what device size i want to ensure that # of rows are adjusted so that table with headers, rows and bottom information are clearly visible.

allan

The displayLength (or legacy iDisplayLength option you have above) option is redundant if you turn paging off (paging) since there is no paging to apply a length to!

I'm assuming that you are running into a problem with the pageResize option. But without a test case (as required in the forum rules) its impossible to say. Can you please link to a test case.

Allan

jadhvaryu

Thanks Allan!

How do i add to test case?

allan

See this article.

Thanks,
Allan