在第一列上添加复选框以标记各行

时间:2014-11-24 12:57:12

标签: javascript jquery twitter-bootstrap checkbox datatable

我是使用DataTables的新手,我需要在我的DataTables元素上添加第一列来标记各行,并且现在不知道如何执行此操作,以便获得任何帮助。想法是在thead上有一个,其中列图例位于其中,为表格中的所有行选中一个复选框,同时在每个tr上放置一个单独的checkbox以允许选择倍数但不是全部。完成此操作后,我需要复制所有标记的行并附加到另一个DataTable,如果新的行有行,否则只是将内容从一个DT复制到另一个DT。第一个DT显示在Twitter Bootstrap模态组件上,我有一个按钮将选定的行复制到背景上的第二个DT(在Bootstrap模式之外),是否可以给我一些帮助或建议?这是我用于处理DT的唯一代码:

if ($.fn.dataTable.isDataTable(selector)) {
    table = $(selector).DataTable();
    table.clear().draw();
    table.destroy();
}

table = $(selector).DataTable({
    "aoColumnDefs": [
        {"bSortable": false, "aTargets": [0, 3]}
    ],
    "info": false,
    "searching": false,
    "dom": '<"toolbar">frtip',
    "pageLength": 5,
    "language": {
        "sProcessing": "Procesando...",
        "sLengthMenu": "Mostrar _MENU_ registros",
        "sZeroRecords": "No se encontraron resultados",
        "sEmptyTable": "Ningún dato disponible en esta tabla",
        "sInfo": "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
        "sInfoEmpty": "Mostrando registros del 0 al 0 de un total de 0 registros",
        "sInfoFiltered": "(filtrado de un total de _MAX_ registros)",
        "sInfoPostFix": "",
        "sSearch": "Buscar:",
        "sUrl": "",
        "sInfoThousands": ",",
        "sLoadingRecords": "Cargando...",
        "oPaginate": {
            "sFirst": "Primero",
            "sLast": "Último",
            "sNext": "Siguiente",
            "sPrevious": "Anterior"
        },
        "oAria": {
            "sSortAscending": ": Activar para ordenar la columna de manera ascendente",
            "sSortDescending": ": Activar para ordenar la columna de manera descendente"
        }
    }
});

selector可以是任意内容,例如:#idTable.classTable,对于HTML表格代码,您可以使用tables在Bootstrap网站上提供的代码,该矿只是相同但具有不同的数据并在运行中构建我的意思是使用AJAX从数据库获取记录。无论如何这里是一段代码:

<table class="table table-hover">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
  </tbody>
</table>

0 个答案:

没有答案