DataTable 행 값 onClick

저는 지난 2 주 동안 DataTables에서 끊임없이 공부하고 일해 왔으며 이제는 벽돌 벽에 도착했습니다. 정렬하려고하는 문제는 해당 행의 단추를 클릭 할 때 특정 행의 값을 전달할 수있는 방법입니다. 지금 DataTables 및 JQuery에 대한 제한된 지식으로 서로 다른 행에 2 ~ 3 개의 버튼이 있고 각 버튼을 클릭하면 모두 되돌아 오는 값은 첫 번째 행의 값뿐입니다. 이 문제를 가장 잘 해결할 수 있는지 또는 내 오류가있는 부분을 잘 모릅니다. 모든 가이드 또는 도움을 많이 주시면 감사하겠습니다. 감사합니다DataTable 행 값 onClick

<script type="text/javascript" charset="utf-8"> 

<!-- ------------------- Extract all Alerts ---------------------- --> 
    $(document).ready(function(){ 
     var alertTable = $('#alert-table').DataTable({ 
      "jQueryUI": true, 
      "columns": [ 
       { "data": "source", "visible": false }, 
       { "data": "host" }, 
       { "data": "description" }, 
       { "data": "priority" }, 
       { "data": "acknowledged", render: function(data, type, row) { 
        if (data == "0" && row.priority > "2") {return '<div><form method="post" id="'+row.source + row.eventid+'" action="include/db_conn.php"> <input type="hidden" id="evtid" value ="'+row.eventid+'"> <input type="hidden" name="source" value ="'+row.source+'"> <INPUT TYPE="text" name="username" size="3" maxlength="3"> <input type="submit" name="'+row.source + row.eventid+'" onClick="ackbutton(this)" value="Ack Alert"></form></div>'; 
        } return data; 
        } 
       } 
      ], 
     }); 

     setInterval (function(){ 
      $.getJSON("data/json_data.txt", function (pcheckdata){ 

       alertTable.clear().draw(); 
       alertTable.rows.add(pcheckdata.alert).draw(); 
       alertTable.columns.adjust().draw(); 
      }); 
     }, 10000); 
    }); 

     function ackbutton() { 
      //e.preventDefault(); 
      var $this = $(this); 
      var getvalues = $('#evtid').val(); 
      alert(getvalues); 
     } 
</script>

HTML :

<body> 
    <div class="all_tables"> 
     <table id="alert-table" class="display" cellspacing="0"> 
      <thead class="t-headers"> 
       <tr> 
        <th>Server</th> 
        <th>Host</th> 
        <th>Description</th> 
        <th>Priority</th> 
        <th>Acknowledged</th> 
        <th>Eventid</th> 
       </tr> 
      </thead> 
     </table> 
    </div> 
</body>

JSON

{ 
    "alert": [ 
     { 
      "source": "Server1", 
      "host": "host1", 
      "description": "Engine Alive", 
      "priority": "4", 
      "triggerid": "14531", 
      "acknowledged": "0", 
      "eventid": "3419709", 
      "value": "1" 
     }, 
     { 
      "source": "Server2", 
      "host": "host2", 
      "description": "webapp down", 
      "priority": "2", 
      "triggerid": "18027", 
      "acknowledged": "1", 
      "eventid": "4012210", 
      "value": "1" 
     } 
    ], 

    "error": [] 
}

출처

2014-09-08 Chelseawillrecover

는 현재 클릭 ACK 버튼의 가장 가까운 사업부에서 'evtid'ID로 입력을 찾아야합니다.

예 :

$(document).on('click','.submitButton',function(e){ 
e.preventDefault(); 
     debugger 
      var $this = $(this); 
     var curEventId = $this.closest('div').find('#evtid'); 
     var getvalues = curEventId.val(); 
     alert(getvalues); 
return false; 

});

당신은 대신 사업부의 가장 가까운 양식을 사용할 수 있습니다.

var curEventId = $ this.closest ('form'). find ('# evtid');

출처

2014-09-08 08:54:35 SSA

안녕하세요. SSA, 응답 해 주셔서 감사합니다. 나는 이것을 시도 할 것이다.하지만 나는 데이터 변경이 새로 고쳐진 후에도 다시 나타나지 않는다는 것을 알아 차렸다. 이것은 제대로 작동하지 않아서 작동을 멈추기 위해 무엇을했는지 알 수 없었습니다. – Chelseawillrecover

코드에서 볼 수 있듯이 브라우저 콘솔에 오류가있을 때까지 테이블을 지우고 새 데이터로 다시 그립니다. 콘솔 오류를 확인하십시오. F12. 무슨 일이 일어나는지 확인하는 가장 좋은 방법은 렌더링 함수와 테이블을 지우고 다시 그려주는 함수들 주위에 중단 점을 설정하는 것입니다. – SSA

안녕하세요, 새로 고침 문제가 이상하게 내 브라우저 캐시되었습니다. 그것을 지웠고 그것은 이상하게 보였다. 두 가지 제안을 모두 시도했지만 ** 결과가 정의되지 않음 ** 결과 – Chelseawillrecover

DataTable 행 값 onClick

답변

관련 문제