Home / Questions / 126590
Accepted
ccfz
Asked: 2020-12-23 04:41:45 +0800 CST 2020-12-23 04:41:45 +0800 CST

刷新数据表后丢失css

  • 772

我有一个datatable列中有一个select2，为此select2我根据选定的值分配了一种颜色，为此，当给我带来所述列的数据时，我调用一个函数来检查，根据状态，color/background应该分配给说select2的那个，问题是当我使用我在 中的自定义按钮来datatable像 a 那样按状态过滤时，颜色reload会丢失css，因为它没有调用estados为它们提供的函数再次着色。我怎么能？

过滤器按钮

<div>
<label for="pendientes">Pendientes</label> 
<input type="radio" class="pendientes" id="pendientes" name="st_filter" checked>
<label for="completada">Completadas</label> 
<input type="radio" class="completada" id="completada" name="st_filter">
<input type="button" onclick="$('#tabla_clientes').DataTable().ajax.reload();" value="Filtrar" class="btn btn-primary">
</div>

JS（数据表，选择2）

$(document).ready(function() {
var table = $('#tabla_clientes').DataTable({
    'paging': true,
    'info': true,
    'filter': true,
    'stateSave': true,
    'processing': true,
    'serverSide': true,
    "dom": '<"top"iflpB<"clear">>rt<"bottom"p<"clear">>',
    'ajax': {
        "method": "POST",
        "url": "../clientes.php"
    },
    "columns": [
        {"data": "id"},
        {"data": "nombre"},
        {"data": "email"},
        {
            render: estados
        }
    ],
    drawCallback: function(){

        $(".select_estados").select2({
            minimumResultsForSearch: -1,
            ajax: {
                url: "../estados.php",
                dataType: 'json',
                delay: 250,
                data: function (params) {
                    return {
                        q: params.term,
                        page: params.page
                    };
                },
                processResults: function (data, page) {
                    return {
                        results: data.items
                    };
                },
                cache: true
            },
            escapeMarkup: function (markup) { return markup; }
        });
    }

});

function estados(full, type, data) {
    if (data.id_estado == 1) {
        $('table .select2-selection--single').addClass('label label-primary');
        $('table .select2-selection__rendered').css('color', 'white');
        $('table .select2-selection--single .select2-selection__arrow b').css('border-color', 'white transparent transparent transparent');
        return '<select class="select_estados"><option value='+data.id_estado+'>'+data.nombre_estado+'</option></select>';
    } else if (data.id_estado == 2) {
        $('table .select2-selection--single').addClass('label label-success');
        $('table .select2-selection__rendered').css('color', 'white');
        $('table .select2-selection--single .select2-selection__arrow b').css('border-color', 'white transparent transparent transparent');
        return '<select class="select_estados"><option value='+data.id_estado+'>'+data.nombre_estado+'</option></select>';
    } else if (data.id_estado == 3) {
        $('table .select2-selection--single').addClass('label label-info');
        $('table .select2-selection__rendered').css('color', 'white');
        $('table .select2-selection--single .select2-selection__arrow b').css('border-color', 'white transparent transparent transparent');
        return '<select class="select_estados"><option value='+data.id_estado+'>'+data.nombre_estado+'</option></select>';
    } else if (data.id_estado == 4) {
        $('table .select2-selection--single').addClass('label label-warning');
        $('table .select2-selection__rendered').css('color', 'white');
        $('table .select2-selection--single .select2-selection__arrow b').css('border-color', 'white transparent transparent transparent');
        return '<select class="select_estados"><option value='+data.id_estado+'>'+data.nombre_estado+'</option></select>';  
    } else if (data.id_estado == 5) {
        $('table .select2-selection--single').addClass('label label-danger');
        $('table .select2-selection__rendered').css('color', 'white');
        $('table .select2-selection--single .select2-selection__arrow b').css('border-color', 'white transparent transparent transparent');
        return '<select class="select_estados"><option value='+data.id_estado+'>'+data.nombre_estado+'</option></select>';
    } else{
        $('table .select2-selection--single').addClass('label label-default');
        $('table .select2-selection__rendered').css('color', 'black');
        $('table .select2-selection--single .select2-selection__arrow b').css('border-color', 'white transparent transparent transparent');
        return '<select class="select_estados"><option value='+data.id_estado+'>'+data.nombre_estado+'</option></select>';
    }
}
});

示例图像：

在此处输入图像描述

在此处输入图像描述

jquery

4 Answers

  1. 我看不到你在哪里调用状态函数。这发生在你身上，因为你在 ajax 中应用 css，你必须这样做

    $(document).ready(function (){
    // por ejemplo haciendo esto, con algunas adaptaciones según tus necesidades
    $('table .select2-selection--single').addClass('label label-primary');
    $('table .select2-selection__rendered').css('color', 'white');
    $('table .select2-selection--single .select2-selection__arrow b').css('border-color', 'white transparent transparent transparent');
})

    这样每次我完成重新加载页面时，都可以应用 css。

    您也可以使用相同的状态函数来节省一些代码，但您可能需要进行一些调整

    • 2

  2. 我没有看到你在任何地方调用状态函数，无论如何我不会过多接触你的代码，就是用当前状态保存一个全局变量，每次返回过滤后的数据时，再次调用该函数“ state()”，状态存储在全局变量中，谁说状态，说值需要更新和维护你所拥有的。我希望你能明白。 

    $(document).ready(function() {
var estado = 0; //Ve actualizandolo cada vez que filtran o al inicio cuando lo llamas la primera vez
var table = $('#tabla_clientes').DataTable({
    • 1

  3. 有些事情发生在我身上

    您的功能中的第一个状态：

    我认为它可以像这样更漂亮：

    function estados(full, type, data) {

    // En primer lugar, genera las variables que mas adelante pudieras escalar dinámicamente
    arrLabelType = ['0' => 'default', '1' => 'primary', '2' => 'success', '3' => 'info', '4' => 'warning', '5' => 'danger']; 

    $('table .select2-selection--single').addClass('label label-'+arrLabelType[data.id_estado]);


    if(data.id_estado == 0)
    {
        $('table .select2-selection__rendered').css('color', 'black');
    }else{
        $('table .select2-selection__rendered').css('color', 'white');
    }

    $('table .select2-selection--single .select2-selection__arrow b').css('border-color', 'white transparent transparent transparent');

    return '<select class="select_estados"><option id=optId-'+data.id_estado+' value='+data.id_estado+'>'+data.nombre_estado+'</option></select>';


}

    现在，如果您可以看到在选择的返回中，在 OPTION 中，我放置了一个新东西：

    Su ID úinica de la opción seleccionada, ya que pones 'optId-'+data.id_estado+....

    这应该给你 optId-1 | 选择 ID-2 | 选择 ID-3...

    现在，它就像检测它的 id 一样简单：

    $(document).ready(function(){
    arrLabelType = ['0' => 'default', '1' => 'primary', '2' => 'success', '3' => 'info', '4' => 'warning', '5' => 'danger']; 

    for(i = 0; i < arrLabelType.length; i++)
    {
        if($('#optId-'+i+'').attr('id').split('-')[1] == i)
        {

            $('table .select2-selection--single').addClass('label label-'+arrLabelType[i]);
        }

        if($('#optId-'+i+'').attr('id') == 0)
        {
            $('table .select2-selection__rendered').css('color', 'black');
        }else{
            $('table .select2-selection__rendered').css('color', 'white');
        }

    }

    $('table .select2-selection--single .select2-selection__arrow b').css('border-color', 'white transparent transparent transparent');
});

    我们基本上做的是，在加载文档的时候，检查唯一的id，如果它与循环匹配，即等于它的相同数字，则表示你在那个数字中。所以我们然后使用面板类型数组（默认，信息，警告......）

    这里的关键是在select中生成唯一的IDS。

    这样可以避免在过滤内容后调用 states 函数。

    我们遗漏了最重要的一点，那就是让 IDS 值保留在我们稍后在加载文档时检查的选项中。

    这将在您的重新加载功能中

    执行 reload 时，您可以转到重置表和值之前的那一刻，保存您感兴趣的内容，让它清理所有内容，最后再次添加这些选项的信息。

    您甚至可以使用 ID 和值保存整个选项，然后使用 select2 "delete(); DELETE，即整个 HTML 标记。最后，您使用值执行选项的 append(OPTION);。重置所有选项，除了选定的您决定保留的选项。

    一旦加载了网页，这些选择或选项就有了它们的 IDS，因此“文档准备就绪”的第二个逻辑将放置相应的颜色。

    您保留颜色并避免在过滤后执行 states() 函数。

    我希望这可以帮助你。

    • 1
  4. Best Answer

    您必须在 dataTables 中寻找另一个事件来调用状态函数。

    从你称之为列的渲染的地方，它不是最好的地方。

    现实情况是，每行需要一个事件，或者在表格完全绘制后调用该函数。

    查看数据表文档我看到了这个事件： https ://datatables.net/reference/event/draw 每次“绘制”表格时，您都可以调用您的状态函数。

    要让这个函数知道每行的 id_Status 是什么，请将其添加到数据表中：

    $('#tabla_clientes').dataTable( {
  'createdRow': function( row, data, dataIndex ) {
      $(row).attr('data-id_estado', data.id_estado);
  }
});

    这样，每生成一个TR(row)，就会在每个TR中创建一个data-id_state属性。

    <tr data-id_estado='3'>...</tr>

    然后在您的状态函数中，您只需读取每个 TR 并根据其 data-id_status 应用该类。

    要读取数据类型的属性 - 您可以使用：

    $(this).attr("data-id_estado")

    要遍历所有 TR，您可以使用：

    $('#clientes> tbody  > tr').each(function() { /* Lo que debas de hacer en cada TR */ });

    我建议您在使用此类插件时尝试使用其事件来修改 TR、TD 等。但是如果由于某种原因您不能总是等待生成 HTML 并应用您的更改。

    我希望我已经指导您找到解决方案。

    • -1