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

Issue with semantic UI

$
0
0

Apologies for not being able to link a test case or a debugger report. A test case is not possible because I am currently developing it via localhost. A debugger report is not possible due to the fact that I am running it in a react app which appears to make the table out of scope for the debugger.

Everything works perfectly with the standard dt stylesheets, but when I switch to Semantic UI only the buttons and scrollbar get formatted while the table itself remains unstyled.

I required the packages as follows at the top of my DataTablesEditor component. I have tried both with and without the top 5 packages required with the same result:

require('datatables.net');
require('datatables.net-buttons');
require('datatables.net-select');
require('datatables.net-editor');
require('datatables.net-colreorder');

require('datatables.net-buttons/js/buttons.colVis.min.js');
require( 'datatables.net-se' );
require( 'datatables.net-editor-se' );
require( 'datatables.net-buttons-se' );
require( 'datatables.net-colreorder-se' );
require( 'datatables.net-select-se' );

Here are the relevant npm package versions:

"dependencies": {   
    "datatables.net-buttons": "^1.6.2",
    "datatables.net-buttons-dt": "^1.6.2",
    "datatables.net-buttons-se": "^1.6.2",
    "datatables.net-colreorder": "^1.5.2",
    "datatables.net-colreorder-dt": "^1.5.2",
    "datatables.net-colreorder-se": "^1.5.2",
    "datatables.net-dt": "^1.10.21",
    "datatables.net-editor": "^1.6.5",
    "datatables.net-editor-dt": "^1.6.3",
    "datatables.net-editor-se": "^1.6.3",
    "datatables.net-se": "^1.10.21",
    "datatables.net-select": "^1.3.1",
    "datatables.net-select-dt": "^1.3.1",
    "datatables.net-select-se": "^1.3.1"
}

"devDependencies": {
    "datatables.net": "^1.10.21",
    "jquery": "^3.5.1"
  }

Any suggestions would be greatly appreciated.

Thanks,
Phil


Responsive mode - "click" event and data expand conflict

$
0
0

Hello,
There is a simple datatables implementation, with responsive option enabled.

table = $('#table').DataTable( { responsive: true, ajax: "./ajax/data.php" });

There is jQuery OnClick event also:
$('#table tbody').on('click', 'tr td', function(e) { DO SOMETHING }

On "big screen" all working fine. There is one problem on small screen. When I click "plus" button (on screen) to expand row, the OnClick event is triggered.

I know, that I can use: tr td:not(:first-child) to prevent execute event on first column click, but it will make first column not clickable on "big screen" view also. Is possible to prevent execute event when I clicking "plus" button and parallely leave rest of first column clickable? Or prevent execute event when first column clicking only in "small screen"?

Статья N15 о Рулетка В Казино Плей Фортуна - Виды Развлечения Популярной Игры

$
0
0

Вебмастер же получает проверенные офферы от надежных заказчиков и действует под защитой партнерской сети.

Итак, как играть в игровые автоматы онлайн казино и его софт? 3. Отзывы о казино.

Бесспорное преимущество этого игорного заведения - индивидуальный подход к каждому гостю. На что только не идут производители товаров для животных, чтобы облегчить жизнь их владельцам (и увеличить продажи своего продукта).
Однако и на выигрыши рассчитывать при использовании демо-версий слотов не получится. Кроме стандартного набора игр рулетка, баккара, блэкджек, крэпс, пай-гоу покер, в Крауне впервые в мире была введена электронная рулетка. Рулетки бывают электронные и механические.
<a href="https://elslots-prime.com/">эльслот</a>
В современных онлайн играх различное количество выигрышных комбинаций, чем больше комбинаций, тем выше шансы пользователя на победу. Но российское государство выбрало иную стратегию: полный запрет деятельности игорных заведений. Если пользоваться услугами новых ресурсов, нет гарантий, что им доступны крупные суммы для выплат.
В общей сложности количество игровых автоматов, установленных во всех казино, входящих в комплекс Sun City составляет около 900. Процедура клинического обследования включала в себя скрининговое тестирование на предмет зависимости от участия в азартных играх, сбор анамнеза, анализ психического состояния, субъективных и доступных объективных сведений. Таким образом, на основании проведённого исследования можно сделать следующие выводы.

Custom Field being not accessed

$
0
0

Hi,
I have a custom field named RO_Category with three number of buttons just alike todo list where only one button can be enabled at a time. Based upon the selection of these buttons, I want to have updated another field(not custom one) with select type.
Here is how I defined the custom field **RO_Category **

_fieldTypes.RO_Category = {
create: function ( conf ) {
  var that = this;

  conf._enabled = true;

  // Create the elements to use for the input
  conf._input = $(
      '<div id="'+Editor.safeId( conf.id )+'">'+
          '<button type="button" style="margin-right:2px;" id="btn1" class="inputButton" value="TPDS" data-toggle="tooltip"  data-placement="top" title="Targetted Public Distribution System">TPDS</button>'+
          '<button type="button" class="inputButton" id="btn2" value="OWS"  data-toggle="tooltip"   data-placement="top" title="Other Welfare Schemes">OWS</button>'+
           '<button type="button" class="inputButton" id="btn3" value="OMSS" data-toggle="tooltip"  data-placement="top" title="Open Market Sale Scheme">OMSS</button>'+
          
      '</div>');

  
  $('button.inputButton', conf._input).click( function () {
      if ( conf._enabled ) {
          that.set( conf.name, $(this).attr('value') );
          }

      return false;
  } );

  return conf._input;
},

get: function ( conf ) {
  return $('button.selected', conf._input).attr('value');
},

set: function ( conf, val ) {
  $('button.selected', conf._input).removeClass( 'selected' );
  $('button.inputButton[value='+val+']', conf._input).addClass('selected');
},

enable: function ( conf ) {
  conf._enabled = true;
  $(conf._input).removeClass( 'disabled' );
},

disable: function ( conf ) {
  conf._enabled = false;
  $(conf._input).addClass( 'disabled' );
}
};

In my index file, I have included these fields as below

{
          label: "RO_Category:",
          name: "RO_Category",
           type: "RO_Category",
          options: [ "TPDS", "OWS","OMSS" ],
          def : "TPDS",
        },
        {
          label: "RO_Sub_Category:",
          name: "RO_Sub_Category",
          type: "select",
        },

In order to have changed the select options of 2nd field based on selection of my custom field, i used following code

editor.field( 'RO_Category' ).input().on( 'change', function ()
                {
                  var scheme=editor.field( 'RO_Category' ).get();
                  if(scheme=='OWS')
                  {
                    editor.field('RO_Sub_Category').update(["MDM-Primary", "MDM-Upper Primary", "SAG","Defence","WIS"]);   
                  }
                  
                });

But, clicking on my custom buttons do nothing.
Please help me resolve this issue.

Regards
Shatrughan Sangwan

How does editor send data to restful server in application/json format?

$
0
0

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:
Hi,

In my app, I need to do CRUD operation on rows. I prefer to standard restful server, such as POST/DELETE. I know the ajax option(CREATE, EDIT...), but the recieved HTTP packages are of "content-type:"application/x-www-form-urlencoded; charset=UTF-8"".

How can I send ajax data to server in application/json format?

thanks!

How to display total value of a column on print

Can we add if condition inisde datatable init to control when to call the footercallback function

$
0
0

I have multiple tables for which I'm using a common datatable init function.
I just need to add an if condition to control calling the footercallback function, I only need to call that function for some tablenames.
I tried to test an if condition right before footercallback, it gives me syntax error

 if(tableName!== ''){
         console.log("testing 123")
      },
       "footerCallback": function (row, data, start, end, display) {
         var api = this.api(), data;

 table = $('#'+tableName).DataTable({
      'orderCellsTop': true,
      'pageLength': 100,
       "order": [[ 1, "desc" ]],
       dom: 'Blfrtip',
       "buttons": [
         $.extend(true, {}, buttonCommon, {
           extend: 'print',
           exportOptions: { columns: ':visible' },
           customize: function ( doc ) {
             if(tableName == 'single_order_data'){
               $(doc.document.body).find("td:nth-child(9)").css({"color": "#389732",'font-weight': 'bold','margin-right': '5px'});
             }else{
               $(doc.document.body).find("td:nth-child(12)").css({"color": "#389732",'font-weight': 'bold','margin-right': '5px'});
             }
           }
         }),
       ],

      initComplete: function () {
        var api = this.api();
        count = 0;
        $('.thead2', api.table().header()).each(function (i) {
          var column = api.column(i);
          var title = column.header();
          if ($(this).hasClass('filterhead')) {
            var column = api.column(i);
            var title = column.header();
            //replace spaces with dashes
            title = $(title).html().replace(/[W]/g, '-');

            var select = $('<select id="' + title + '" class="select2" ></select>')
              .appendTo($(this).empty())
              .on('change', function () {
                //Get the "text" property from each selected data
                //regex escape the value and store in array
                var data = $.map($(this).select2('data'), function (value, key) {
                  return value.text ? '^' + $.fn.dataTable.util.escapeRegex(value.text) + '$' : null;
                });

                //if no data selected use ""
                if (data.length === 0) {
                  data = [""];
                }

                //join array into string with regex or (|)
                var val = data.join('|');

                //search for the option(s) selected
                column
                  .search(val ? val : '', true, false)
                  .draw();
              });

            column.data().unique().sort().each(function (d, j) {
              select.append('<option value="' + d + '">' + d + '</option>');
            });

            //use column title as selector and placeholder
            $('#' + title).select2({
              multiple: true,
              closeOnSelect: false,
              placeholder: "Select a " + title
            });

            // initially clear select otherwise first option is selected
            $('.select2').val(null).trigger('change');
          }
        });
      },
       if(tableName!== ''){
         console.log("testing 123")
      },
       "footerCallback": function (row, data, start, end, display) {
         var api = this.api(), data;

         // Remove the formatting to get integer data for summation
         var intVal = function (j) {
           return typeof i === 'string' ?
             j.replace(/[\$,]/g, '') * 1 :
             typeof i === 'number' ?
               j : 0;
         };

         // Total over all pages
         total = api
           .column( 1 )
           .data()
           .reduce( function (a, b) {
             return intVal(a) + intVal(b);
           }, 0 );

         // Total over this page
         pageTotal = api
           .column( 1, { page: 'current'} )
           .data()
           .reduce( function (a, b) {
             return intVal(a) + intVal(b);
           }, 0 );

         // Update footer
         $( api.column( 1 ).footer() ).html(
           '$'+pageTotal.toFixed(2) +' ( $'+ total.toFixed(2) +' total)'
         );
       }
    });

How to pre-select a row in a custom searchpane?

$
0
0

I would like to pre-select a row in one of my custom panes in my searchPanes. Is there any way to do this?

Here is a cut-down version of my searchPanes definition:

searchPanes:{
    layout: 'columns-4',
    dtOpts:{
        searching: false,
        ordering: false
    },
    orderable: false,
    panes: [
        {
            header:'Availability',
            options:[
                {
                    label:'Available, 100%',
                    value: function(rowData, rowIdx){
                        return rowData[availcolumn] === 'Available';
                    }
                },
                {
                    label:'Unavailable, 0%',
                    value: function(rowData, rowIdx){
                        return rowData[availcolumn] === 'Unavailable';
                    }
                }
            ]
        }
    ]
}

And here are my columnDefs. I do have class="availability" in the thead th cell of my Availability column. The preSelect section does not pre-select the row.

columnDefs:[
    {
        searchPanes:{
            show: false,
        },
        targets: '_all',
    },
    {
        searchPanes:{
            show: true,
        },
        targets: 'searchpane',
    },
    {
        searchPanes:{
            preSelect:['Available, 100%']
        },
        targets: '.availability'
    }
]

How to show in one row grouped data with aggreagates in Datatables ?

$
0
0

Hi,

I want to group some similar data in to a row with aggregate.
I tried with the plug-in RowGroup but it only shows by level (level 0, level 1 ... level n).

I am trying to create a table with DataTables. I want to have in my Datatable table :

A row group with the different data of the table and with other columns aggreates
* All grouped data in one row
* Child rows with details of the grouped rows

Name Position Office Age Start date Salary
Tiger Nixon System Architect Edinburgh 61 2011/04/25 $320,800
Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750
Tiger Nixon System Architect Edinburgh 61 2009/01/12 $86,000

In this example, we can see two rows with the same data. And i want to group the data with some specific columns like the Name, Position, Office and Age. It's like a GROUP BY in SQL and i need to show the first row with the grouped data and some agreggrates on the two last columns. I've tried with Datatable RowGroup but it only shows data by level (level 0, level 1, level 2, etc.)

Thank you in advance

How to Re-render a table after modifying $.fn.dataTable.defaults

$
0
0

For a variety of reasong I have a page with 2 tables. Each one is inside a TAB content and has different configuration as they are totally different.

I do NOT have access to table initialization in javascript because my team is given a <tableComponent> which internally does the initialization.

Only way I found to alter this is via $.fn.dataTable.defaults
Problem is that with 2 tables I need to change defaults values and then re render the HTML table with these new value when I click in the table TAB.

So, is it possible to re-render a table after changing $.fn.dataTable.defaults vlaues?
I tried xxxinstance.draw() without success.

data table separated different button

$
0
0

hi, i got data table, in data table row are two button, i wanna separated them, because one for delete, one for edit. I use js, to add what button. Picture bellow

Now then i press edit or delete i got the same. my code js code

var table = $('#calEvents').DataTable( {
        "processing": true,
        "serverSide": false,
        "order": [[ 3, "asc" ]],
        "ajax": "/api/v1/calendar/get",
        'columnDefs': [
            {
               targets: 2, render: function(data1){ return moment(data1).format('dddd')},
            },
            {
               targets: -1, defaultContent: '<button class="btn btn-secondary" data-dismiss="modal" id="Edit" type="button">Edit</button>'
                 + '&nbsp <button class="btn btn-danger" id="Delete" data-dismiss="modal" type="button">Delete</button>'
            },
            { targets: 3, render: function(data2){ return moment(data2).format('YYYY-MM-DD')}},
        ]
    } );
   $('#calEvents').on( 'click', 'button', function () {
   var data = table.row( $(this).parents('tr') ).data();
   var row= this.parentNode.parentNode;
   var confirmalert = confirm("Are you sure?");
   if (confirmalert == true) {
      document.getElementById("calEvents").deleteRow(row.rowIndex);
          }else{
        alert('Invalid ID.');
          }
 });

Now i got only delete function, because i cant test if they working like one.
i try do something like
$('#calEvents .deleteButton').click(function (){ <button class="btn btn-danger" id="Delete" data-dismiss="modal" class="deleteButton" type="button">Delete</button>'
but my button not working then.

How to combine Server Side Search and Full Text Search

$
0
0

I am not a PHP expert. Javascript looks like Klingon to me. So bear with me. I am just a web designer trying to use datatables to present data from a MySQL table (95,000 rows)

Server Side Processing is working as expected
Live search is working as expected
I cannot get full-text search to work with Server-side processing.

Below is my Index.php

<html>
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">



<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">

</head>
<body>

Dx Id Code Formatted Code Valid For Coding Short Description Long Description
$(document).ready(function() { $('#icd10').DataTable( { "processing": true, "serverSide": true, searching: true, "ajax": "server_processing.php" } ); } );

</body>
</html>

mysql -V
mysql Ver 15.1 Distrib 10.1.40-MariaDB, for Linux (x86_64) using readline 5.1

Below is my test site
https://www.prognoso.com/mycodes/

How to autofit column width when exporting DataTables to Excel

$
0
0

Hello everyone, I know this question has been asked few times here but couldn't figure out a working solution.

My columns are set dynamically based on user selection so I don't want to set width manually to each column.

I created a function to customize my exported file

customize: function(xlsx) { 
        var sheet = xlsx.xl.worksheets['sheet1.xml'];
        var col = $('col', sheet);
        var width_details = [];
        $('tr:nth-child(1) > td').each(function(){
        width_details.push($(this).width()); });
        var q = 0;
        col.each(function () {
        $(this).attr('width', width_details[q]);
        q++; });
}

I had an idea to check the width of each column in my table and store it in an array then while the data is exported to Excel I loop through my array and set the same width to excel columns.
The issue is the width in DataTables and Excel doesn't seem to be calculated the same way.

Here is a demo example https://jsfiddle.net/q4j8khLf/

Can you please suggest me what should i add more to autofit the columns width in the exported Excel file ? Thank you very much.

Attempting to join a table on compound key match

$
0
0

Attempting to set up a series of joins with one of them matching on multiple columns, as the key for the primary table as well as the one joined have multiple entries for just a column like ID, and it's only the combination of name and id that make a row unique.
Essentially I want the SQL to end up something like

"SELECT ... FROM table1
LEFT JOIN table2 on table1.col1 = table2.col1 AND table1.carrier_name = table2.carrier_name"

I had tried something along the lines of

$editor->leftJoin( 'table2', 'table2.col1', '=', 'table1.col1', 'AND', 'table2.carrier_name', '=', 'table1.carrier_name' );

But this didn't work, as I'm assuming the function for join isn't meant for this use case.
Additionally, mjoin didn't seem to work as the primary and secondary tables both use the combination of id and carrier name as a compound key.

Using this code:

$editor->join(
        Mjoin::inst( 'rate' )
            ->link( 'table2.col1', 'table1.col1' )
            ->link( 'table2.carrier_name', 'table1.carrier_name' )
            ->fields(
                Field::inst( 'table1.rate * table1.miles as total_rate' )
            )
    );

Left an error on load stating "MJoin is not currently supported with a compound primary key for the main table."

Just a little lost as to how to do this join. The field itself doesn't even need to be editable, it just needs to be one I can view in the dt data object on the front end for some conditional formatting and I'm not sure if there's a better way to do this or some documentation that I've overlooked. Any help would be much appreciated.

Having an issue, cant explan where the prob is..

$
0
0

this is the code, im working with MVC C#, sometimes, having 500 error and after refresh working fine..

$(document).ready(function () {
try {
var dir = $("html").attr("dir");
var _oLanguage = '';
if (dir == "rtl") {
_oLanguage = 'ar-KW';
}

        AddAntiForgeryToken = function (data) {
            data.__RequestVerificationToken = $('input[name=__RequestVerificationToken]').val();
            return data;
        };

        var baseurl = $('#txtBaseUrl').val();

        var input = AddAntiForgeryToken({
            token: $(".txtUserSTK").val(),
            userinfo: $(".txtServerUtilObj").val(),
            useripaddress: $(".txtuserip").val(),
            sessionid: $(".txtUserSes").val(),
            methodname: "MemLawInfowithPollTableData",
            currenturl: window.location.href,
            selectedculture: $(".txtSelectedCulter").val()
        });


        var animcounter = 1.2;

        var dt = $('#MemberCardViewDT').dataTable({
            "bDestroy": true,
            //"retrieve": true,
            "bFilter": true,
            "language": {
                "url": (dir == 'rtl' ? "//cdn.datatables.net/plug-ins/1.10.20/i18n/Arabic.json" : "")
            },

            "columnDefs": [{
                "targets": 0,
                "searchable": true,
                "orderable": false,
            }],

            "pageLength": 8,

            //"oLanguage": _oLanguage,
            "processing": true,
            "serverSide": true,
            "autoWidth": false,
            "responsive": true,
            "ajax": {
                "url": baseurl + "Public/MemberListCardView_TableData",
                "type": "POST",
                "contentType": 'application/x-www-form-urlencoded',
                "dataType": "json",
                "data": input
            },
            "columns": [
                { "title": "fullname" },
                { "title": "cityname" },
                { "title": "photo" },
                { "title": "ex_nvarchar1" },
                { "title": "ex_nvarchar2" }
            ],
            "initComplete": function (settings, json) {
                // show new container for data
                $('#new-list').insertBefore('#MemberCardViewDT');
                $('#new-list').show();
            },
            "rowCallback": function (row, data) {
                // on each row callback
                var li = $(document.createElement('li'));
                li.className = "col-xs-12 col-sm-8 col-lg-3";

                //console.log(data);
                //var eventtitle = data[0];
                //var eventtitlear = data[1];
                //var eventdescription = data[2];
                //var eventdescriptionar = data[3];

                var fullname = data[0];
                var cityname = data[1];
                var photo = data[2];
                var socialdiv = data[3];
                var memberpagelink = data[4];

                animcounter = 1.2 + .2;

                var str = '';
                //str +=  '<div class="row">';
                str += '<div class="col-xs-12 col-sm-6 col-lg-2  text-center offset-lg-1 wow bounceInUp" data-wow-duration="' + animcounter + 's" style="visibility: visible; animation-duration: ' + animcounter + 's; animation-name: bounceInUp;">';
                str += '<div class="team-box  text-center ">';
                str += '   <div class="team-img ">';
                str += ' <a href="#" onclick="' + memberpagelink + '">';
                str += '     <img src="' + photo + '" alt=""  class="img-fluid responsive"/>';
                str += ' </a>';

               // if (socialdiv != '')
                   // str += socialdiv;

                str += '</div>';
                str += ' <a href="#" onclick="' + memberpagelink + '">';
                str += '<div class="team-content text-center photocontainer">';
                str += '<h6>' + fullname + '</h6>';
                //str += '<hr>';
                //str += '<h6>' + cityname + '</h6>';
                str += '</div>';
                str += ' </a>';
                str += '</div>';
                str += '</div>';
                //str += '</div>';

                li.append(str);

                li.appendTo('#new-list');
            },
            "preDrawCallback": function (settings) {
                // clear list before draw
                $('#new-list').empty();
            }
        });

        $("#MemberCardViewDT_paginate").parent('div').attr('class', 'col-xs-12 col-sm-6 col-lg-2');
    } catch (e) {
        $.alert({
            title: _getCookieForLanguage("_informationTitle"),
            content: e,
            type: 'red'
        });
    }

});

controller:

    [HttpPost]
    [ValidateInput(true)]
    [AllowCrossSiteJsonAttribute]
    [ValidateAntiForgeryToken]
    //[LoggingFilterAttribute]
    [ExceptionFilter]
    public async Task<ActionResult> MemberListCardView_TableData([ModelBinder(typeof(DataTablesBinder))] IDataTablesRequest requestModel, GETMemberListEntity input)
    {

..... var items = tut.Select(item => new[]
{
item.fullname,
item.cityname,
item.photo,
item.ex_nvarchar1,
item.ex_nvarchar2
});

                result = this.Json(new { draw = requestModel.Draw, recordsTotal = totalRecords, recordsFiltered = totalRecords, data = items }, JsonRequestBehavior.AllowGet);

}


Unselectable cells

$
0
0

Hi, I am facing a very simple but unusual problem. In all Datatables you can double click on a text and select it, like the example below

But in my Datatable, I am not able to do it. Please see my example below:
http://live.datatables.net/yurozuyo/1/edit

I noticed the reason is

          createdRow: function ( row, data, dataIndex, cells ) {
            $(row).attr('draggable', 'true');
         }, 

Would you be able to let me know how I should modify it that it makes the text in table selectable?

Many thanks, Golnaz

How to add record ID to the link in my edit buttons

$
0
0

Hi all,

I have a list of users and in the last column I have an edit button, defined using columnDefs.

https://jsfiddle.net/kharmer/Lf5vxm8d/

How do I got about assigning the record ID to each edit button on each row? The documentation has confused me a little!

Best regards,
Kris...

Having an issue, cant explan where the prob is.. Datatable post error 500, but not always.

$
0
0

Link to test case:

Debugger code (debug.datatables.net):

js doc ready

$(document).ready(function () {
try {
var _oLanguage = 'ar-KW';
AddAntiForgeryToken = function (data) {
data.__RequestVerificationToken = $('input[name=__RequestVerificationToken]').val();
return data;
};
var baseurl = $('#txtBaseUrl').val();
var input = AddAntiForgeryToken({
token: $(".txtUserSTK").val(),
userinfo: $(".txtServerUtilObj").val(),
useripaddress: $(".txtuserip").val(),
sessionid: $(".txtUserSes").val(),
methodname: "MemLawInfowithPollTableData",
currenturl: window.location.href,
selectedculture: $(".txtSelectedCulter").val()
});
var animcounter = 1.2;

        var dt = $('#MemberCardViewDT').dataTable({
            "bDestroy": true,
            //"retrieve": true,
            "bFilter": true,
            "language": {
                "url": (dir == 'rtl' ? "//cdn.datatables.net/plug-ins/1.10.20/i18n/Arabic.json" : "")
            },

            "columnDefs": [{
                "targets": 0,
                "searchable": true,
                "orderable": false,
            }],

            "pageLength": 8,

            //"oLanguage": _oLanguage,
            "processing": true,
            "serverSide": true,
            "autoWidth": false,
            "responsive": true,
            "ajax": {
                "url": baseurl + "Public/MemberListCardView_TableData",
                "type": "POST",
                "contentType": 'application/x-www-form-urlencoded',
                "dataType": "json",
                "data": input
            },
            "columns": [
                { "title": "fullname" },
                { "title": "cityname" },
                { "title": "photo" },
                { "title": "ex_nvarchar1" },
                { "title": "ex_nvarchar2" }
            ],
            "initComplete": function (settings, json) {
                // show new container for data
                $('#new-list').insertBefore('#MemberCardViewDT');
                $('#new-list').show();
            },
            "rowCallback": function (row, data) {
                // on each row callback
                var li = $(document.createElement('li'));
                li.className = "col-xs-12 col-sm-8 col-lg-3";

                var fullname = data[0];
                var cityname = data[1];
                var photo = data[2];
                var socialdiv = data[3];
                var memberpagelink = data[4];

                animcounter = 1.2 + .2;

                var str = '';
                str += '<div class="col-xs-12 col-sm-6 col-lg-2  text-center offset-lg-1 wow bounceInUp" data-wow-duration="' + animcounter + 's" style="visibility: visible; animation-duration: ' + animcounter + 's; animation-name: bounceInUp;">';
                str += '<div class="team-box  text-center ">';
                str += '   <div class="team-img ">';
                str += ' <a href="#" onclick="' + memberpagelink + '">';
                str += '     <img src="' + photo + '" alt=""  class="img-fluid responsive"/>';
                str += ' </a>';

                str += '</div>';
                str += ' <a href="#" onclick="' + memberpagelink + '">';
                str += '<div class="team-content text-center photocontainer">';
                str += '<h6>' + fullname + '</h6>';
                str += '</div>';
                str += ' </a>';
                str += '</div>';
                str += '</div>';

                li.append(str);

                li.appendTo('#new-list');
            },
            "preDrawCallback": function (settings) {
                // clear list before draw
                $('#new-list').empty();
            }
        });

        $("#MemberCardViewDT_paginate").parent('div').attr('class', 'col-xs-12 col-sm-6 col-lg-2');
    } catch (e) {
        $.alert({
            title: _getCookieForLanguage("_informationTitle"),
            content: e,
            type: 'red'
        });
    }});

```C#

    [HttpPost]
    [ValidateInput(true)]
    [AllowCrossSiteJsonAttribute]
    [ValidateAntiForgeryToken]
    [ExceptionFilter]
    public async Task<ActionResult> MemberListCardView_TableData([ModelBinder(typeof(DataTablesBinder))] IDataTablesRequest requestModel, GETMemberListEntity input)
    {
        GETMemberListEntity objprofile = new GETMemberListEntity();
        // Initialization.  
        JsonResult result = new JsonResult();
        try
        {
            string search = Request.Form.GetValues("search[value]")[0];


                var items = tut.Select(item => new[]
                {
                    item.fullname,
                    item.cityname,
                    item.photo,
                    item.ex_nvarchar1,
                    item.ex_nvarchar2
                });

                result = this.Json(new { draw = requestModel.Draw, recordsTotal = totalRecords, recordsFiltered = totalRecords, data = items }, JsonRequestBehavior.AllowGet);

        }
        catch (Exception ex)
        {
            return Json(new { status = KAF.MsgContainer._Status._statusFailed, title = KAF.MsgContainer._Status._titleGenericError, redirectUrl = "", responsetext = ex.Message }, JsonRequestBehavior.AllowGet);
        }
        return result;

``` end of code

Error messages shown:

Site
6

Process
9792

Failure Reason
STATUS_CODE

Trigger Status
500

Final Status
500

Description of problem:
Sometimes getting this error, 500 while posting, but after 1 refresh, the error gone for that specific session.

Infinite ajax loading with cascadePanes=true and serverSide=true

$
0
0

It is. It's even happening in "Editor" trial in the examples. Instead of cascadePanes parameter, viewTotal will do the same. I had updated searchpanes from 1.0.1 and 1.1.1 and both versions did not worked.

The only way I found to stop this is to declare a global variable, set render function to any column that will set it to 0 and to pass "ajax" parameter to DT as function like this:

$.fn.dataTable.pipeline = function ( opts ) {
    // Configuration options
    var conf = $.extend( {
        pages: 5,   // number of pages to cache
        url: '',    // script url
        data: null, // function or object with parameters to send to the server
                    // matching how `ajax.data` works in DataTables
        method: 'GET', // Ajax HTTP method
    }, opts );

    return function ( request, drawCallback, settings ) {
        return $.ajax( {
            "type":     conf.method,
            "url":      conf.url,
            "data":     request,
            "dataType": "json",
            "cache":    false,
            "success":  function ( json ) {
                if(!bRebuildPanes)
                {
                    $('#example').DataTable().searchPanes.rebuildPane();
                    bRebuildPanes = 1;
                }
                drawCallback( json );
            }
        } );
    }
};

The only problem with this is that rebuildPane() has no any effect and there are no any other api for SearchPanes.

Set custom buttons with different class names

$
0
0

I have 5 custom button that I would like to change the color using Bootstrap 4 classNames. I am able to override the dataTable classes by using dom: , but how do I do this for each button?

    buttons: {
        buttons: [
                 { text: 'Time In',
                   attr: {id: 'timeInButton' },
                   action: function ( e, dt, node, config ) { timeIn() }
                 },
                 {  text: 'Lunch Out',
                    attr: {id: 'lunchOutButton'},
                    action: function ( e, dt, node, config ) { lunchOut() }
                 },
                 {  text : 'Lunch In', 
                    attr: { id: 'lunchInButton'},
                    action: function ( e, dt, node, config ) {lunchIn() }
                 },
                 { text: 'Time Out',
                   attr: { id: 'timeOutButton'},
                   action: function ( e, dt, node, config ) {timeOut() }
                  },
                 { text: 'Create Out of Office Entry',
                   attr: { id: 'OutOfOfficeButton'},
                   action: function ( e, dt, node, config ) {createOutOfOffice() }
                  }
            ],
        dom: {
              button: { className: "btn btn-primary"},
              buttonLiner: { tag: null }
             }
    },
Viewing all 82673 articles
Browse latest View live


<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>