Javascript Error - DataTables

Question

Javascript Error - DataTables

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

Hello, I have a code that works in dataTables on a page, so I took the template and the only changes I made was renaming the js , renaming the function $ () The rest left the same in the case the structure, I only know the basics of js and came to resort to help.

Here I call in html my js:

<table class="table table-bordered table-striped" id="js-table-lista-cliente-mes" style="min-width: 100%; width: 100%;">

follows the js and html code:

var table = $('#js-table-lista-cliente-mes').DataTable({
  "sDom": '<"search-box"r>ltip',
  "lengthChange": false,
  "language": {
    "sEmptyTable": "Nenhum registro encontrado",
    "sInfo": "Mostrando de _START_ até _END_ de _TOTAL_ registros",
    "sInfoEmpty": "Mostrando 0 até 0 de 0 registros",
    "sInfoFiltered": "(Filtrados de _MAX_ registros)",
    "sInfoPostFix": "",
    "sInfoThousands": ".",
    "sLengthMenu": "_MENU_ resultados por página",
    "sLoadingRecords": "Carregando...",
    "sProcessing": "Processando...",
    "sZeroRecords": "Nenhum registro encontrado",
    "sSearch": "Pesquisar",
    "oPaginate": {
      "sNext": "Próximo",
      "sPrevious": "Anterior",
      "sFirst": "Primeiro",
      "sLast": "Último"
    },
    "oAria": {
      "sSortAscending": ": Ordenar colunas de forma ascendente",
      "sSortDescending": ": Ordenar colunas de forma descendente"
    }
  }
});

$('#fini').change(function() {
  table.draw();
});
$('#ffin').change(function() {
  table.draw();
});

$("#searchbox").on("keyup search input paste cut", function() {
  table.search(this.value).draw();
});

$('#codMaster').on('keyup', function() {
  table
    .column(2)
    .search(this.value)
    .draw();
});

$('#razaoSocial').on('keyup', function() {
  table
    .column(3)
    .search(this.value)
    .draw();
});


$('#nomeFantasia').on('keyup', function() {
  table
    .column(4)
    .search(this.value)
    .draw();
});


$('#tipo').on('keyup', function() {
  table
    .column(5)
    .search(this.value)
    .draw();
});

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="LayoutPadrao">

<head>
</head>
<section layout:fragment="conteudo">
  <div class="conteudo">
    <div class="col-md-12 col-lg-12">
      <div class="table-responsive">
        <table class="table table-bordered table-striped" id="js-table-lista-cliente-mes" style="min-width: 100%; width: 100%;">
          <thead>
            <tr>
              <th class="th-1 text-left col-md-1">
                <div class="search btn btn-default">
                  <a href="#" class="search-icon"> <i class="fa fa-search"></i>
                  </a> <input type="text" id='codMaster' style="width: 7em;" />
                </div>
              </th>
              <th></th>
              <th></th>
              <th class="text-center col-md-2">
                <div class="search btn btn-default">
                  <a href="#" class="search-icon"> <i class="fa fa-search"></i>
                  </a> <input type="text" id='razaoSocial' />
                </div>
              </th>
              <th class="text-center col-md-1">
                <div class="search btn btn-default">
                  <a href="#" class="search-icon"> <i class="fa fa-search"></i>
                  </a> <input type="text" id='nomeFantasia' style="width: 7em;" />
                </div>
              </th>
              <th></th>
              <th></th>
              <th class="text-center col-md-1 ">
                <div class="search btn btn-default">
                  <a href="#" class="search-icon"> <i class="fa fa-search"></i>
                  </a> <input type="text" id='tipo' style="width: 7em;" />
                </div>
              </th>
              <th></th>
              <th></th>
              <th></th>
            </tr>
            <th:block th:each="historicoClienteMes,idx : ${listaVendasCliente}">
              <th:block th:if="${idx.index == 0}">
                <thead>
                  <tr style="font-size: 12px">
                    <th class="text-center col-md-1" th:text="${historicoClienteMes[0]}"></th>
                    <th class="text-center col-md-1" th:text="${historicoClienteMes[1]}"></th>
                    <th class="text-center col-md-1" th:text="${historicoClienteMes[2]}"></th>
                    <th class="text-center col-md-1" th:text="${historicoClienteMes[3]}"></th>
                    <th class="text-center col-md-1" th:text="${historicoClienteMes[4]}"></th>
                    <th class="text-center col-md-1" th:text="${historicoClienteMes[5]}"></th>
                    <th class="text-center col-md-1" th:text="${historicoClienteMes[6]}"></th>
                    <th class="text-center col-md-1" th:text="${historicoClienteMes[7]}"></th>
                    <th class="text-center col-md-1" th:text="${historicoClienteMes[8]}"></th>
                    <th class="text-center col-md-1" th:text="${historicoClienteMes[9]}"></th>
                    <th class="text-center col-md-1" th:text="${historicoClienteMes[10]}"></th>
                    <th class="text-center col-md-1" th:text="${historicoClienteMes[11]}"></th>
                  </tr>
                </thead>
              </th:block>
              <th:block th:if="${idx.index > 0}">
                <tbody>
                  <tr style="font-size: 12px">
                    <td class="text-center col-md-1" th:text="${historicoClienteMes[0]}"></td>
                    <td class="text-center col-md-1" th:text="${historicoClienteMes[1]}"></td>
                    <td class="text-center col-md-1" th:text="${historicoClienteMes[2]}"></td>
                    <td class="text-center col-md-1" th:text="${historicoClienteMes[3]}"></td>
                    <td class="text-center col-md-1" th:text="${historicoClienteMes[4]}"></td>
                    <td class="text-center col-md-1" th:text="${historicoClienteMes[5]}"></td>
                    <td class="text-center col-md-1" th:text="${historicoClienteMes[6]}"></td>
                    <td class="text-center col-md-1" th:text="${historicoClienteMes[7]}"></td>
                    <th class="text-center col-md-1" th:text="${historicoClienteMes[8]}"></th>
                    <th class="text-center col-md-1" th:text="${historicoClienteMes[9]}"></th>
                    <th class="text-center col-md-1" th:text="${historicoClienteMes[10]}"></th>
                    <th class="text-center col-md-1" th:text="${historicoClienteMes[11]}"></th>
                  </tr>
                </tbody>
              </th:block>
            </th:block>
          </thead>
        </table>
      </div>
    </div>
  </div>
</section>

</html>

javascript html jquery jquery-datatables datatable

asked by anonymous 16.10.2018 / 14:30

2 answers

Save Field Record Text Disabled AJAX + PHP Filter jquery list with checkbox

score 1 · Answer 1

DataTables requires a well-formatted table to work, this error is common when it does not find a tag or if it contains errors. Here is an example table:

<table id="myTable">
    <thead>
        <tr>
            <th>Coluna 1</th>
            <th>Coluna 2</th>
        </tr>
    </thead>
    <tbody> <!-- ESSE TBODY NÃO TEM NO SEU CÓDIGO -->
        <tr> <!-- Linha 1 -->
            <td>Linha 1 Coluna 1</td>
            <td>Linha 1 Coluna 2</td>
        </tr>
        <tr> <!-- Linha 2 -->
            <td>Linha 2 Coluna 1</td>
            <td>Linha 2 Coluna 2</td>
        </tr>
    </tbody>
</table>

Your <tbody> is within <thead> . And the DataTables requires that the <table> tag has at least daughters the <thead> and <tbody> tags, and any other tag than expected also generates error.

This error also occurs when you have more columns in thead than in tbody, eg

<table id="myTable">
    <thead>
        <tr> <!-- Cabeçalho com 3 células -->
            <th>Coluna 1</th>
            <th>Coluna 2</th>
            <th>Coluna 3</th>
        </tr>
    </thead>
    <tbody>
        <tr> <!-- Linha com duas células -->
            <td>Linha 1 Coluna 1</td>
            <td>Linha 1 Coluna 2</td>
        </tr>
    </tbody>
</table>

Try to clean your table and create it gradually, see if the DataTables will catch, and when it stops working, you will know what is different if the increment is small, gradually transforming a empty table until you get to your very complex.

score 0 · Answer 2

var table = $('#js-table-lista-cliente-mes').DataTable({
		"sDom": '<"search-box"r>ltip',
		"lengthChange": false,
		"language": {
			"sEmptyTable": "Nenhum registro encontrado",
			"sInfo": "Mostrando de _START_ até _END_ de _TOTAL_ registros",
			"sInfoEmpty": "Mostrando 0 até 0 de 0 registros",
			"sInfoFiltered": "(Filtrados de _MAX_ registros)",
			"sInfoPostFix": "",
			"sInfoThousands": ".",
			"sLengthMenu": "_MENU_ resultados por página",
			"sLoadingRecords": "Carregando...",
			"sProcessing": "Processando...",
			"sZeroRecords": "Nenhum registro encontrado",
			"sSearch": "Pesquisar",
			"oPaginate": {
				"sNext": "Próximo",
				"sPrevious": "Anterior",
				"sFirst": "Primeiro",
				"sLast": "Último"
			},
			"oAria": {
				"sSortAscending": ": Ordenar colunas de forma ascendente",
				"sSortDescending": ": Ordenar colunas de forma descendente"
			}
		}
	});

	$('#fini').change(function() {
		table.draw();
	});
	$('#ffin').change(function() {
		table.draw();
	});

	$("#searchbox").on("keyup search input paste cut", function() {
		table.search(this.value).draw();
	});

	$('#codMaster').on('keyup', function() {
		table
		.column(2)
		.search(this.value)
		.draw();
	});

	$('#razaoSocial').on('keyup', function() {
		table
		.column(3)
		.search(this.value)
		.draw();
	});


	$('#nomeFantasia').on('keyup', function() {
		table
		.column(4)
		.search(this.value)
		.draw();
	});


	$('#tipo').on('keyup', function() {
		table
		.column(5)
		.search(this.value)
		.draw();
	});

   <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="LayoutPadrao">
<head>
</head>
<section layout:fragment="conteudo">
<div class="conteudo">
	<div class="col-md-12 col-lg-12">
		<div class="table-responsive">
			<table class="table table-bordered table-striped" id="js-table-lista-cliente-mes" style="min-width: 100%; width: 100%;">
				<thead>
					<tr>
						<th class="th-1 text-left col-md-1">
							<div class="search btn btn-default">
								<a href="#" class="search-icon"> <i class="fa fa-search"></i>
								</a> <input type="text" id='codMaster' style="width: 7em;" />
							</div>
						</th>
						<th></th>
						<th></th>
						<th class="text-center col-md-2">
							<div class="search btn btn-default">
								<a href="#" class="search-icon"> <i class="fa fa-search"></i>
								</a> <input type="text" id='razaoSocial' />
							</div>
						</th>
						<th class="text-center col-md-1">
							<div class="search btn btn-default">
								<a href="#" class="search-icon"> <i class="fa fa-search"></i>
								</a> <input type="text" id='nomeFantasia' style="width: 7em;" />
							</div>
						</th>
						<th></th>
						<th></th>
						<th class="text-center col-md-1 ">
							<div class="search btn btn-default">
								<a href="#" class="search-icon"> <i class="fa fa-search"></i>
								</a> <input type="text" id='tipo' style="width: 7em;" />
							</div>
						</th>
						<th></th>
						<th></th>
						<th></th>
					</tr>
				</thead>
				<th:block th:each="historicoClienteMes,idx : ${listaVendasCliente}">
						<th:block th:if="${idx.index == 0}">
						<thead>
							<tr style="font-size: 12px">
								<th class="text-center col-md-1" th:text="${historicoClienteMes[0]}"></th>
								<th class="text-center col-md-1" th:text="${historicoClienteMes[1]}"></th>
								<th class="text-center col-md-1" th:text="${historicoClienteMes[2]}"></th>
								<th class="text-center col-md-1" th:text="${historicoClienteMes[3]}"></th>
								<th class="text-center col-md-1" th:text="${historicoClienteMes[4]}"></th>
								<th class="text-center col-md-1" th:text="${historicoClienteMes[5]}"></th>
								<th class="text-center col-md-1" th:text="${historicoClienteMes[6]}"></th>
								<th class="text-center col-md-1" th:text="${historicoClienteMes[7]}"></th>
								<th class="text-center col-md-1" th:text="${historicoClienteMes[8]}"></th>
								<th class="text-center col-md-1" th:text="${historicoClienteMes[9]}"></th>
								<th class="text-center col-md-1" th:text="${historicoClienteMes[10]}"></th>
								<th class="text-center col-md-1" th:text="${historicoClienteMes[11]}"></th>
							</tr>
					</thead>
				</th:block>
				<th:block th:if="${idx.index > 0}">
					<tbody>
						<tr style="font-size: 12px">
							<td class="text-center col-md-1" th:text="${historicoClienteMes[0]}"></td>
							<td class="text-center col-md-1" th:text="${historicoClienteMes[1]}"></td>
							<td class="text-center col-md-1" th:text="${historicoClienteMes[2]}"></td>
							<td class="text-center col-md-1" th:text="${historicoClienteMes[3]}"></td>
							<td class="text-center col-md-1" th:text="${historicoClienteMes[4]}"></td>
							<td class="text-center col-md-1" th:text="${historicoClienteMes[5]}"></td>
							<td class="text-center col-md-1" th:text="${historicoClienteMes[6]}"></td>
							<td class="text-center col-md-1" th:text="${historicoClienteMes[7]}"></td>
							<th class="text-center col-md-1" th:text="${historicoClienteMes[8]}"></th>
							<th class="text-center col-md-1" th:text="${historicoClienteMes[9]}"></th>
							<th class="text-center col-md-1" th:text="${historicoClienteMes[10]}"></th>
							<th class="text-center col-md-1" th:text="${historicoClienteMes[11]}"></th>
						</tr>
					</tbody>
				</th:block>
				</th:block>
			</table>
		</div>
	</div>
</div>
</section>
</html>