Javascript error - Datatables

Asked

Viewed 370 times

0

Hello I already have a code that works on the dataTables on a page, so I took the template and the only changes I made was rename the js , rename function $() and . column(I placed the column position) the rest I left the same in the case the structure, I only know the basics of js and I came to appeal for 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%;">

follow 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

  • What do you have in return? Does it just not load? Does an error appear on the console? What more specifically is not working?

  • Uncaught Typeerror: Cannot read Property 'mData' of Undefined at Htmltablecellelement.<Anonymous> (jquery.dataTables.min.js:90) at Function.each (jquery-3.3.1.min. js:2) at w.fn.init.each (jquery-3.3.1.min. js:2) at Htmltableelement.<Anonymous> (jquery.dataTables.min.js:90) at Function.each (jquery-3.3.1.min. js:2) at w.fn.init.each (jquery-3.3.1.min. js:2) at w.fn.init. n [as datatable] (jquery.dataTables.min.js:83) at w.fn.init.h.fn.Datatable (jquery.dataTables.min.js:165) at Htmldocument.<Anonymous> (htk.js:174) at l (jquery-3.3.1.min. js:2)

  • When it occurred to me, I included the <tbody></tbody> and it worked.

  • where did you put it? because mine is already with tbody already

  • @Joycesd yours <tbody></tbody> is inside a th:block on thead, tries to place a direct child tbody from your table, enter and the </thead> and the </table>

  • updated the code in the answer below!

  • @evandrobm checked tbody and even then it was not by the Mdata console error is something in html , likely to be.

  • @Joycesd avoids answering with updates of the question, you can edit your question when you need to, to make it more organized for those viewing later.

  • vlw will do that ...

  • I added a reply commenting on the error, to make it easier to view

Show 5 more comments

2 answers

1

The 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 of a 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 inside the <thead>. And the Datatables requires the tag <table> have at least as daughters the tags <thead> and <tbody>, and any other unexpected tag also generates error.

This error also occurs when you have more columns in thead than in tbody, for example:

<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 up your table and gradually create it, see if Datatables will pick up, and when it stops working, you will know what’s different if the increment is small, gradually transforming an empty table until you get to this complex well.

  • I’m doing it now by following your tip, piecing together the table, thank you!

  • @Joycesd any doubt just ask, if it works out do not forget to accept the answer, it is important to help other people with the same doubt as you in the future!

0

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>

Browser other questions tagged javascript html jquery

You are not signed in. Login or sign up in order to post.