Как я могу выбирать линию DataTable, и который захватил Id?

Я делаю один DataTable и я хотел бы смочь выбирать линию, и что этого выбора функция захватила Id, чтобы мочь делать операции, как удаление реестра, я перемещаю данные в форме Json со связью php.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../image/favicon.ico">

<title>Disytel Import - Productos</title>
<!-- Bootstrap core CSS -->
<link href="../../css/bootstrap.min.css" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="../../css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="../../js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->  
<link href="../../fonts/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- Custom styles for this template -->
<link href="../css/admin.css" rel="stylesheet">

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.2.0/css/select.bootstrap.css"/>

<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/select/1.2.0/js/dataTables.select.js"></script>
    <script type="text/javascript" language="javascript" src="../js/custom.js"></script>
    <script type="text/javascript" language="javascript" src="../js/funciones.js"></script>
    <link href="../css/style.css" rel="stylesheet" />
</head>

<body class="admin">
<div class="main">        
    <header>       
    </header>
  <!-- NAVBAR
================================================== -->
    <nav class="navbar navbar-default navbar-fixed-top admin">
        <?php require_once('../php/nav.php');?>
    </nav>

    <section class="admin2 admin3">
        <div class="container-fluid">
            <div class="row-fluid">
                <div class="col-sm-12 col-md-12">
                    <article id="contenido">
                        <table cellpadding="0" cellspacing="0" border="0" class="display table" id="tabla_lista_productos">
                            <thead>
                                <tr>
                                    <th>id</th><!--Estado-->
                                    <th>countryes</th>
                                    <th>iso2</th>
                                    <th>iso3</th>
                                    <th>noc</th>
                                    <th>acciones</th>
                                </tr>
                            </thead>
                            <tfoot>
                                <tr class="">
                                    <th></th>
                                    <th></th>             
                                </tr>
                            </tfoot>
                            <tbody>
                            <tbody>
                        </table>
                    </article>
                </div>
            </div>
        </div>              
    </section>
    <!-- end section -->
    <footer>
        <?php require_once('../php/footer.php');?>
    </footer>
    <!--end FOOTER -->
</div><!--end main -->

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>-->
<script>window.jQuery || document.write('<script src="../../js/jquery.min.js"><\/script>')</script>
<script src="../../js/bootstrap.min.js"></script>
<!-- Just to make our placeholder images work. Don't actually copy the next line! -->
<script src="../../js/holder.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../js/ie10-viewport-bug-workaround.js"></script>

Это код PHP.

<?php
include "conexion.php";
$cnn = new conexion();
$con = $cnn->conectar();
mysqli_select_db($con,"datatable");

$sql = "SELECT * FROM countries";
$consulta = mysqli_query($con,$sql);

//guardamos en un array multidimensional todos los datos de la consulta
$i=0;
$tabla = "";

while($row = mysqli_fetch_array($consulta))
{    $tabla.='{"id":"'.$row['id'].'","country":"'.$row['country'].'","iso2":"'.$row['iso2'].'","iso3":"'.$row['iso3'].'","noc":"'.$row['noc'].'"},';
$i++;
}
$tabla = substr($tabla,0, strlen($tabla) - 1);

echo '{"data":['.$tabla.']}';
?>

Это код языка сценариев JavaScript.

$(document).ready(function(){
var table = $('#tabla_lista_productos').dataTable(
   {
    "ajax": "../php/listarDatos.php",
        "columns": [
        { "data": "id" },
        { "data": "country" },
        { "data": "iso2" },
        { "data": "iso3" },
        { "data": "noc" },
        ],
        "bDeferRender": true,
        "oLanguage": {
        "sEmptyTable": "No hay registros disponibles",
        "sInfo": "Hay _TOTAL_ registros. Mostrando de (_START_ a _END_)",
        "sLoadingRecords": "Por favor espera - Cargando...",
        "sSearch": "Filtro:",
        "sLengthMenu": "Mostrar _MENU_",
        "oPaginate": {
        "sLast": "Último",
        "sFirst": "Primero",
        "sNext": "Siguiente",
        "sPrevious": "Anterior"
        }
        }
        }
    );
$('#tabla_lista_productos tbody').on( 'click', 'tr', function () {
    if ( $(this).hasClass('selected') ) {
        $(this).removeClass('selected');
    }
    else {
        table.$('tr.selected').removeClass('selected');
        $(this).addClass('selected');
    }
} );
destroyUser()
})
var url;
        function destroyUser(){
//no se como va esta funcion
}

Это код PHP, который он удаляет.

<?php

$id = intval($_REQUEST['id']);

include 'conn.php';

$sql = "delete from countries where id=$id";
$result = @mysql_query($sql);
if ($result){
    echo json_encode(array('success'=>true));
} else {
    echo json_encode(array('errorMsg'=>'Some errors occured.'));
}
?>

Уже смоги выбирать линии DataTable с примером, который я взял из официального сайта, но я не знаю, как оставлять себе стоимость Id этого выбора и перемещать это в код PHP.

4
задан 31.05.2017, 20:51
2 ответа

ты должен добавлять признак внутри твоего html, Примера:

<tr class="identificador" data-id="id"></tr> //el id que te retorna tu consulta sql

Потом ты идентифицируешь элемент этой формы с jquery:

$(.identificador).click(function(){
  var id = $(this).attr("data-id");
});

здесь оставил тебе документацию признаков с jquery: http://api.jquery.com/attr/

0
ответ дан 24.11.2019, 13:47
  • 1
    этот признак, который ты помещаешь tr, - tr, который внутри thead?? и этот код jquery, где я должен объединять это? – YLdesarrollos 24.07.2016, 23:32
  • 2
    этот признак, который ты помещаешь tr, - tr, который внутри thead?? и этот код jquery, где я должен объединять это? @Ivan Koop – YLdesarrollos 25.07.2016, 01:33

https://datatables.net/reference/option/rowId

Со свойством rowId ты показываешь, что колонна твоего dataset - тот, который функционирует как идентификатор. Этой формы DataTables он берется за то, чтобы производить каждые tr с идентификатором.

Потом посредством jQuery ты можешь возвращать стоимость каждой линии.

0
ответ дан 24.11.2019, 13:47

в меня я я функционирую очень хорошо добавлять кнопку к таблице, у которой, как пойдите, была стоимость, которую я хотел, и так мочь выполнять специфические функции. Например:

1. - Восток - тот JSON

var jsonObject = { "id":2,"tipo":"json"}

2. - Так я это загружаю во мне DataTable

$('#MiTabla').DataTable({            
        aaData: jsonObject,
        aoColumns: [{
                sTitle: "Id",
                mDataProp: "id",
                visible: false
            },
            {
                sTitle: "Tipo",
                mDataProp: "tipo"
            },
            {
                sTitle: "Accion",
                mDataProp: "id",
                sWidth: '7%',
                orderable: false,
                render: function(data) {
                    acciones = `<button id="` + data + `" value="Eliminar" type="button" class="btn btn-danger btn-xs accionesTabla" title="Eliminar">
                                    Eliminar
                                </button>`;
                    return acciones
                }
            }
        ]
    });

Поскольку ты можешь видеть, я добавил, что другая линия в мою таблицу, которая, где я произведу кнопку, с которой он реализует какую-то функцию, уже состояла в том, чтобы издавать, удалять или включая отображать специфические реестры. В renderizar вышеупомянутая колонна отобразит кнопку html, что, как пойдите, у него будет mDataProp, как класс accionesTabla что это будет важно, чтобы контролировать события клика произведенной кнопки и в конце концов титул и стоимость функции, которую нужно реализовывать, в этом случае Eliminar

3.-Controlar событие клика кнопки таблицы

$(document).on('click', '.accionesTabla', function() {

    var id = this.id;
    var val = this.value;

    switch (val) {
        case "Editar":
            alert(id + " Editar");
            break;
        case "Ver":
            alert(id + " Ver");
            break;
        case "Eliminar":
            alert(id + " Eliminar");    
            break;
        default:
            alert("No existe el valor");
            break;
    }
});

В вышеупомянутом шаге я верю в событие клика, основанного на классе, чтобы избегать того, чтобы события клика запутались с типом button. Нажав на произведенную кнопку таблицы в зависимости от value распределенный он произведет alert с id и стоимостью, которую мы распределяем. Я надеюсь, что он подает тебя, привет!

1
ответ дан 03.12.2019, 21:11