JQ事件在datatable.js的提取行排序上未激活 [英] JQ event didnt active on the extract row sort by datatable.js

查看：54
本文介绍了JQ事件在datatable.js的提取行排序上未激活的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用DataTable.js来显示数据，并且在我的<tr>中有一些<select>选项，并且DataTable显示了具有默认参数的第10个第一行，并且我有一个JQ更改事件.这是我的问题，JQ .change()事件仅在第10行起作用. 如果我在用户视图中更改show选项(代码源中为no)，则该选项仍适用于第10行.

I'm using DataTable.js to showing the data and I have some <select> option in my <tr> and DataTable are showing the 10 frist row with default param and I have a change event with JQ. Here is my problem, the JQ .change() event only work at the 10 frist row. If I change the show option in the user view (no in the code source), it still work for the 10 frist row.

我试图在select元素上添加onchange="changeEvent".很好，它没有出现在用户显示代码源中

I tried to add onchange="changeEvent" on the select element.. well it didnt show up in user display code source 

$('select[name="type"]').change(function(){
    var type_req = $(this).val();

    var id = $(this).closest('tr').find('td#id_commande').html();
    var action ="update";
    var action_infos = "type_req";

    console.log("change event active");
    console.log(type_req);
    console.log(id);

    $.ajax({
        type: "POST",
        url: "../controllers/commandeController.private.php",
        data:{id:id ,action : action ,action_infos : action_infos ,type : type_req},
        success:function(){toastr.success("Modification commande réussi")},
        error:function(){toastr.error("Modification commande impossible")},
    });
});

我只是尝试在所有行上都激活.change，即使用户更改显示选项后它们又显示出来了

I'm just trying the .change active on all row even they are show up after by user changing show up option

[函数showReqTypeAsOption]

[function showReqTypeAsOption]

function showReqTypeAsOption($array=array()){

  $option="";
  if(!$array == null){

    if(empty($array['name'])){
      $array['name']="type_bis";

    }
    if(!empty($array['current_type'])){
      $select=1;
    }
  }

  $res=getReqType();

  foreach ($res as $ligne) {

    if($select){
      if($ligne['id'] == $array['current_type']){
        $selected= "selected";
        // $select=0;
      }else{
        $selected= "";
      }
    }

    $option = $option."<option value='".$ligne['id']."' $selected > ".$ligne['type_name']." </option>";
  };
  $option='<select name="'.$array['name'].'" id="Req_type" > '.$option.' </select>';


  return $option;
}


// DataTable
$(document).ready(function() {
  $('#MyTable').DataTable();
  $('#defaultTable2').DataTable();
  $('#defaultTable3').DataTable();
  $('#defaultTable4').DataTable();
});

$(function() {
$('#myTable').DataTable();

$("select[name='type']").change(function() {
  var type_req = $(this).val();
  var id = $(this).closest('tr').find('td.id_commande').html();
  console.log("change event active");
  console.log(type_req);
  console.log(id);
});
});

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="scripts/script.js"></script>


    <title></title>
  </head>
  <body>


    <table id="MyTable" class="table table-bordered display" style="width:100%">
  <thead>
    <tr>
      <th>ID Col</th>
      <th>Select</th>
    </tr>
  </thead>
  <tbody>
<tr>
  <td class="id_commande">Row 1</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 2</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 3</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 4</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 5</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 6</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 7</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 8</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 9</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 10</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 11</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 12</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 13</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 14</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 15</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 16</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 17</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 18</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 19</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 20</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 21</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 22</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 23</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 24</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 25</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 26</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 27</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 28</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 29</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 30</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
  </tbody>
</table>

推荐答案

这对我有用，希望对您有用，所以请尝试

This works for me hopefully it will work for you so try this

  $('#example tbody').on( 'change', 'select[name="your_select_name"]',function(){
                  var data = '';
                 data = example.row( $(this).parents('tr') ).data();
                  var clientid = data['your column name'];
                  var selectId = this.value;
                 console.log(clientId);
                 console.log(selectedId);

                //if id is okay do an ajax call inside a function something like this
                if(clientid != undefined){
                 ajaxCallBack(clientId,selectedId)
                             .done(function(response){
                                   //your update response here
                                    })
                    }
    })

ajax函数:

function ajaxCallBack(clientId,selectId){
  return   $.ajax({
    method: "POST",
    url: "YourUrl",
    data: { action: "UPD", clientId: clientId, selectId: selectId}
  })
}


Your datatable should be declared like this:

  var example= $('#example').DataTable({
                "destroy": true,
                "responsive":{
                  "details": {
                  renderer: function ( api, rowIdx, columns ) {
                    var data = $.map( columns, function ( col, i ) {
                      return col.hidden ?
                        '<tr data-dt-row="'+col.rowIndex+'" data-dt-column="'+col.columnIndex+'">'+
                          '<td>'+col.title+':'+'</td> '+
                          '<td>'+col.data+'</td>'+
                        '</tr>' :
                        '';
                    } ).join('');

                    return data ?$('<table/>').append( data ) :false;
                  }
                }
              },
                "autoWidth": false,
                      "ajax": {
                          "url": 'some.php',
                          "method": 'POST',
                          data:{accion:"SLC"}
                      },
                      "columns": [
                          {"data": "client"},
                          {"data": "name"},
                          {"data": "lastname"},
                          {"data": "device"},
                          {"data": "city"},
                          {
                       className: "center",
                       defaultContent:"<select id='idSelect' name ='idSelect'  ><option value='default'>Seleccionar</option><option value='1'>hello</option></select>"
                     }
                      ],
                      "language":{"url": "//cdn.datatables.net/plug-ins/1.10.15/i18n/Spanish.json"},
                        "columnDefs": [
                          {
                            "className": "dt-center", "targets": "_all"
                           }
                        ]
                  }
                );

希望有帮助

这篇关于JQ事件在datatable.js的提取行排序上未激活的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆