свяжите таблицы с данными, когда нажимаете кнопку

Пожалуйста, помогите мне, я хочу привязать таблицу к datatables, когда пользователь нажимает кнопку, но кодировка не работает. Мой код выглядит следующим образом:свяжите таблицы с данными, когда нажимаете кнопку

<script src="jquery.js"></script> 
<link href="css/jquery.dataTables.min.css" rel="stylesheet" /> 
<script type="text/javascript" language="javascript" src="js/jquery.dataTables.min.js"></script> 

<script type="text/javascript"> 
$(document).ready(function() { 
var table = $('#example').dataTable({ 
    "ajax": 'data.json', 
    "paging": false, 
    "searching": false, 
    "order": [[ 0, "asc" ]] 
}); 
var t = $('#example').DataTable(); 
$('#addRow').on('click', function() { 
    t.row.add([ 
     "1", 
     "2", 
     "3", 
    ]).draw(); 
}); 
$("#button").click(function(e){ 
    $(".wrapper").html('<div><div id="addRow">add</div><table id="example" class="row-border hover" cellspacing="0" width="100%"><thead><tr><th align="left">title 1</th><th align="left">title 2</th><th align="left">title 3</th></tr></thead></table></div>'); 
}); 
}); 
</script> 
<body> 
<div class="wrapper"></div> 
<div class="button"><input name="tbSubmit" type="button" value="click this button" id="button"></div>

Мой data.json это выглядит, как показано ниже:

{ 
    "data": [ 
     [ 
      "1.1", 
      "1.2", 
      "1.3" 
     ], 
     [ 
      "2.1", 
      "2.2", 
      "2.3" 
     ], 
     [ 
      "3.1", 
      "3.2", 
      "3.3" 
     ] 
    ] 
}

код будет работать, если этот код не в HTML клик, но в классе обертке, как показано ниже:

$("#button").click(function(e){ 
    $(".wrapper").html(''); 
}); 

<div class="wrapper"><div><div id="addRow">add</div><table id="example" class="row-border hover" cellspacing="0" width="100%"><thead><tr><th align="left">title 1</th><th align="left">title 2</th><th align="left">title 3</th></tr></thead></table></div></div>

Спасибо за любые помогает :)

источник

2015-06-23 Gus Hendra

Вы пытаетесь связать событие с #addRow, прежде чем он существует. Только после того, как вы нажмете #button, он будет добавлен в .wrapper.

Для того чтобы событие привязывалось к работе, #addRow должно быть уже на DOM. ИЛИ ... можно привязать к предку в качестве слушателя, как это:

$('.wrapper').on('click', '#addRow', function() { /*etc*/ });

источник

2015-06-23 05:09:52

Он решил, что я просто изменить позицию так:

$(".wrapper").html('<div><div id="addRow">add</div><table id="example" class="row-border hover" cellspacing="0" width="100%"><thead><tr><th align="left">title 1</th><th align="left">title 2</th><th align="left">title 3</th></tr></thead></table></div>'); 
     var table = $('#example').dataTable({ 
      "ajax": 'data.json', 
      "paging": false, 
      "searching": false, 
      "order": [[ 0, "asc" ]] 
     }); 
     var t = $('#example').DataTable(); 
     $('#addRow').on('click', function() { 
      t.row.add([ 
       "1", 
       "2", 
       "3", 
      ]).draw(); 
     });

источник

2015-06-23 05:12:01

Это, кажется, совершающие немного другую работу чем исходный вопрос, но он все еще учитывает мой ответ (элемент не был в DOM). Одна из практик, которую вы, возможно, упустили, - это просто скрывать HTML-элементы, которые вы хотите в DOM, но не видны. При щелчке вы можете раскрыть их, а не вводить их. –

Да, Грег, я ошибаюсь, чтобы поставить кодировку до щелчка :) Спасибо за вашу помощь :) –

свяжите таблицы с данными, когда нажимаете кнопку

ответ

Смежные вопросы