Jquery Datatable - Horizontal scroll in Google Chrome and FireFox -
i need use horizontal scroll in jquery datatable, used property:
scrollx: true but work in internet explorer. in google chrome , firefox, breaks table on header , don't show horizontal scroll (bringing blank line in own header).
someone has gone through problem or know how solve?
my code:
// datatable var tipoacao = $("#hdn_tipoacao").val(); var modulo = $("#hdn_modulo").val(); var form = null; var formhtml = ''; form = $('#fdsdamiss'); form.remove(); form = $('<fieldset id="fdsdamiss" class="formulario">').appendto('div.conteudo'); formhtml += '<div class="conteudo">'; formhtml += '<h1 class="titulo">lista de dam-iss</h1>'; formhtml += '<hr class="separadortitulo" />'; formhtml += '<table id="idtabeladamiss" class="datatable table stripe hover row-border order-column">'; formhtml += ' <thead>'; formhtml += ' <tr>'; formhtml += ' <th>dam</th>'; formhtml += ' <th>situação</th>'; formhtml += ' <th>venc. original</th>'; formhtml += ' <th>venc. atualizado</th>'; formhtml += ' <th>valor original</th>'; formhtml += ' <th>valor atualizado</th>'; //economico if (modulo == 3) { formhtml += ' <th>tipo iss</th>'; } formhtml += ' <th>ações</th>'; formhtml += ' </tr>'; formhtml += ' </thead>'; formhtml += ' </table>'; formhtml += ' </div>'; $(formhtml).appendto('#fdsdamiss'); var table = $('#idtabeladamiss').datatable({ idisplaylength: 10, lengthmenu: [[5, 10, 20], [5, 10, 20]], scrollx: true, bfilter: false, bautowidth: false, processing: true, serverside: true, ajax: ajax, language: { processing: "processando...", lengthmenu: "mostrar _menu_ registros", zerorecords: "não foram encontrados resultados", emptytable: 'nenhum registro encontrado', info: 'mostrando de <b>_start_</b> até <b>_end_</b> de um total de <b>_total_</b> registros', infoempty: 'mostrando de <b>0</b> até <b>0</b> de um total de <b>0</b> registros', infofiltered: '(filtrados de _max_ registros)', infopostfix: '', paginate: { sprevious: "anterior", snext: "próximo" }, } , columns: [ { mdata: "id", sname: "id", width: "7%" }, { mdata: "situacaopagamento.descricao", sname: "situacaopagamento.descricao", width: "8%", bsort: false, bsortable: false }, { mdata: "vencimentooriginal", sname: "vencimentooriginal", width: "10%", render: function (data, type, row) { var ano = data.substring(0, 4); var mes = data.substring(5, 7); var dia = data.substring(10, 8); return dia + "/" + mes + "/" + ano; } }, { mdata: "vencimentoatualizado", sname: "vencimentoatualizado", width: "10%", render: function (data, type, row) { var ano = data.substring(0, 4); var mes = data.substring(5, 7); var dia = data.substring(10, 8); return dia + "/" + mes + "/" + ano; } }, { mdata: "valororiginal", sname: "valororiginal", width: "10%" }, { mdata: "valortotal", sname: "valortotal", width: "10%" } , { mdata: null, sname: "acoes", width: "50%", bsort: false, bsortable: false } ], columndefs: [ { "targets": -1, "data": null, "defaultcontent": "<a class='vernotasfiscais' href='#'> ver notas </a> <a> | </a> <a class='cancelar' href='#'>cancelar</a>" }, ], fnserverparams: fnserverparams });
i guess have forgot give table fixed width can scroll within :
div.datatables_wrapper { width: 400px; margin: 0 auto; } at least works me -> http://jsfiddle.net/enbmqyoq/
Comments
Post a Comment