Filter column into server-side

Surup

The code from api does not work. the behavior is this: when specifying a value to search for table.columns (i) .search (v) .draw (); an empty search value for the column is sent to the server. This is the case for all filters of other columns.

<div class="row m-0" style="width:100%; margin:0 auto;">
        <table id="example" class="display" style="width:100%">
            <thead>
                <tr>
                    <th data-column="0">Итоги</th>
                    <th data-column="1">Рубрика - Сайт</th>
                    <th data-column="2">N цикла</th>
                    <th data-column="3">N стр.</th>
                    <th data-column="4">Т-старт</th>
                    <th data-column="5">Т-стоп</th>
                    <th data-column="6">Т-вып.</th>
                    <th data-column="7">Кстр макс</th>
                    <th data-column="8">К стр. стоп</th>
                    <th data-column="9">Об на стр.</th>
                    <th data-column="10">Об нов.</th>
                    <th data-column="11">Об  на всех стр.</th>
                    <th data-column="12">Об нов. на всех стр</th>
                    <th data-column="13">Период</th>
                    <th data-column="14">Оши (1, 2, 3)</th>

                </tr>
            </thead>
            <tfoot>
                <tr>
                    <th data-column="0">Итоги</th>
                    <th data-column="1">Рубрика - Сайт</th>
                    <th data-column="2">N цикла</th>
                    <th data-column="3">N стр.</th>
                    <th data-column="4">Т-старт</th>
                    <th data-column="5">Т-стоп</th>
                    <th data-column="6">Т-вып.</th>
                    <th data-column="7">Кстр макс</th>
                    <th data-column="8">К стр. стоп</th>
                    <th data-column="9">Об на стр.</th>
                    <th data-column="10">Об нов.</th>
                    <th data-column="11">Об  на всех стр.</th>
                    <th data-column="12">Об нов. на всех стр</th>
                    <th data-column="13">Период</th>
                    <th data-column="14">Оши (1, 2, 3)</th>
                </tr>
            </tfoot>
        </table>



    </div>

<script>
    $(document).ready(function () {
          $('#example thead tr').clone(true).appendTo( '#example thead' );
    $('#example thead tr:eq(1) th').each( function (i) {
        var title = $(this).text();
        var datacolumn = $(this).attr('data-column');
        $(this).html( '<input type="text" class="form-control form-control-sm" placeholder="Поиск '+title+'" data-column="'+datacolumn+'" />' );


    } );
    var table = $('#example').DataTable( {
        "processing": true,
        "serverSide": true,
        "orderCellsTop": true,
        "fixedHeader": true,
        "lengthChange": false,
        "searching": false,
        "filter": true,
        "orderMulti": true,
        "ajax": {
                        "url": "@Url.Action("GetHistoryScript","ResultTable")",
            "type": "POST",
                        "datatype": "json"
        },
        "columns": [
                {  "data": "Itog" },
                        { "data": "Category" },
                        {  "data": "NumberCircle" },
                        { "data": "NumberPage" },
                        { "data": "DateStart" , render: function (data, type, row, meta) {
                                return ToJavaScriptDate(data);
                            }},
                        { "data": "DateStop" , render: function (data, type, row, meta) {
                                return ToJavaScriptDate(data);
                            }},
                        { "data": "TimeWork" , render: function (data, type, row, meta) {
                                return ToJavaScriptTime(data);
                            }},
                        {  "data": "CountPageMax" },
                        {  "data": "NumPageStop" },
                        {  "data": "CountResult" },
                        { "data": "CountNewResult" },
                        {  "data": "AllResult" },
            { "data": "AllNewResult" },
                        {  "data": "Period" },
                        {  "data": "Error" },

             ],
            "order": [[11, "desc"], [ 12, "desc" ]],
    });


        $('#example input').on( 'keyup click', function () {   // for text boxes
    var i =$(this).attr('data-column');  // getting column index
    var v =$(this).val();  // getting search input value
    table.columns(i).search(v).draw();
} );
$('#example input').on( 'change', function () {   // for select box
    var i =$(this).attr('data-column');
    var v =$(this).val();
    table.columns(i).search(v).draw();
} );

} );
</script>

<link href="~/Content/jquery-ui.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.1.6/css/fixedHeader.dataTables.min.css" />


@Scripts.Render("~/Scripts/ej2/ej2.min.js")

kthorngren

I suspect the problem is this in line 53:

var datacolumn = $(this).attr('data-column');

It looks like you want to set datacolumn to the value of the column index. I think you will want to change line 53 to the function index (.each( function (i)):

var datacolumn = i;

If this doesn't help then please post a link to your page or a test case replicating the problem. This way we can interact with the code to see what its doing.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

Surup

changed and sent the link in private

kthorngren

The page never loads for me. Did you make the change I suggested?

You can use the browsers inspect tool to see what the code in line 54 sets for the data-column attribute.

In lines 101 and 106 you may want to try the jQuery data() method instead of attr(). For example: var i =$(this).data('column');

Kevin

Surup

console.log(table.column(2).search(2)); //write in cosole ""
console.log(table.column(2).search(2)); //write in cosole ""

and for this reason it comes to the method on the server empty

there are no errors in the console.

Surup

https://codepen.io/Surup/pen/YzzZezR?editors=1111

enable cors chrome

kthorngren

You have "searching": false, in your config. Remove that to allow the searches to be sent.

Kevin

Surup

Great, it worked with that. But how to make sure that the general search string is not shown, but the column search worked

kthorngren

The default global search input will be populated with the search term used with search(). There is no option to not populate the input. However you can use the dom option to remove it from the page and create your own input.

Kevin