Quantcast
Channel: Recent Discussions — DataTables forums
Viewing all 81389 articles
Browse latest View live

Custom search function doesn't work

$
0
0

I'm trying to build up custom search function that implements inclusive or logic across multiple columns using multiple criteria, but I can't seem to get it work properly - search returns empty result set.
My HTML:

<!doctype html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
  <script src="test2.js"></script>
  <script src="mFilter.js"></script>
  <link rel="stylesheet" type="text/css" href="test.css">
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
</head>
<body>
  <table id="mytable"></table>
  <button id="mybutton">Search for apple and vegies</button>
</body>
</html>

My jQuery:

var srcData = [
    {name:"apple", category:"fruit"},
  {name:"banana", category:"fruit"},
  {name:"cabage", category:"vegie"},
  {name:"carrot", category:"vegie"},
];

var dataTable = $('#mytable').DataTable({
    sDom: 't',
  data: srcData,
  columns: [
    {data: 'name', title: 'Name'},
    {data: 'category', title: 'Category'}
 ]
});

$.fn.DataTable.ext.search.push(function(settings, searchData, index, rowData){
    if(rowData.name == searchData[0] || rowData.category == searchData[1]) return true;
  else return false;
});

$('#mybutton').on('click', function(){
    dataTable.search(['apple','vegie']).draw();
});

and jsfiddle, just in case. Any help is greatly appreciated.


How to call react function in column render function ?

Inline editor not opening after a select cell

$
0
0

Hi

I have an editor table that has keys enabled so that I can tab through the cells.

One of the cells is a lookup that does a query to fill in the cell contents by showing a list of suggestions. Using the keyboard I can tab into that cell, choose the entry I want by using the cursor key and then tab to accept it.

When tabbing through and not doing this query then the next cell opens up the next inline editor cell.

However when choosing from the list, the cell does not open the inline editor.

I did some tests and the preOpen and open events are being fired, just the editor itself does not actually open.

If I tab to the next cell, that cells opens correctly and if I then do a ctrl-tab to go back to the previous cell then it also opens correctly.

Does anyone have any suggestions as to why the editor is not opening?

Thanks

Dov

DataTable causing issue on the responsive view as well as on actual devices

$
0
0

The dataTable used in my code has a responsive enabled js (mentioned below) and It is functioning properly but it does not work responsive when the page is loaded for the 1st time, It loads the responsive code when there is a change in the view port or some movement (like scroll) on the phone till then it uses the same desktop width to the complete table, Below attached is the code for you reference.... A quick help would be appreciated....

Package
ID
Master
ID
Master
Name
Package
Category
Package
type
Package
Name
Stays Departure
Date
Departure
City
456 123 SUP 14 Nights Daily Umrah Super Saver Bom 04 Sup SV
  • Stay 1: Makkah, Al Azka, 12/01/2019 - 15/01/2019
  • Stay 2: Madinah, Al Safa, 12/01/2019 - 15/01/2019
04/02/2019 04 : 15 PM Mumbai
457 123 SUP 14 Nights Daily Umrah Super Saver Bom 04 Sup SV
  • Stay 1: Makkah, Al Azka, 12/01/2019 - 15/01/2019
  • Stay 2: Madinah, Al Safa, 12/01/2019 - 15/01/2019
04/02/2019 04 : 15 PM Mumbai
459 123 SUP 14 Nights Daily Umrah Super Saver Bom 04 Sup SV
  • Stay 1: Makkah, Al Azka, 12/01/2019 - 15/01/2019
  • Stay 2: Madinah, Al Safa, 12/01/2019 - 15/01/2019
04/02/2019 04 : 15 PM Mumbai
456 153 SUP 14 Nights Daily Umrah Super Saver Bom 04 Sup SV
  • Stay 1: Makkah, Al Azka, 12/01/2019 - 15/01/2019
  • Stay 2: Madinah, Al Safa, 12/01/2019 - 15/01/2019
04/02/2019 04 : 15 PM Mumbai
456 153 SUP 14 Nights Daily Umrah Super Saver Bom 04 Sup SV
  • Stay 1: Makkah, Al Azka, 12/01/2019 - 15/01/2019
  • Stay 2: Madinah, Al Safa, 12/01/2019 - 15/01/2019
  • Stay 3: Madinah, Al Safa, 12/01/2019 - 15/01/2019
04/02/2019 04 : 15 PM Mumbai

css
<link rel="stylesheet" href="//cdn.datatables.net/responsive/2.2.3/css/dataTables.responsive.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.3/css/responsive.bootstrap.min.css">





JS

$(document).on('show.bs.modal','#myModal', function () { $('#example').DataTable({ autowidth:false, responsive: { details: { display: $.fn.dataTable.Responsive.display.modal( { header: function ( row ) { var data = row.data(); return 'Details for '+data[0]+' '+data[1]; } } ), renderer: $.fn.dataTable.Responsive.renderer.tableAll( { tableClass: 'table' } ) } } }); })

Search exact match

$
0
0

Hi

I'm using DataTables thru the WordPress plugin. My website shows a huge list (4700+ entries, 4 columns) and I want to filter it with the search box. However, it works with a “contains” and I would like an “exact match”. I don't see any option for that.

I contacted the author of the plugin and he can't help me saying that the DataTables JS library is in cause.

Is there any possibility to set search for "exact match" ?

DataTable used inside popup causing issue on the responsive view as well as on actual devices

$
0
0

The DataTable used for one my project's have an issue on the responsive view. The table loads in its desktop view even in mobile unless we make some movement (like scroll) or change in viewport of window causes the Table to turn responsive below is the code for same.... Kindly help soon....

<div id="myModal" class="modal fade" role="dialog">

``` ```
```
``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ```
Package
ID
Master
ID
Master
Name
Package
Category
Package
type
Package
Name
StaysDeparture
Date
Departure
City
456123SUP 14 NightsDaily UmrahSuper SaverBom 04 Sup SV ```
    ```
  • Stay 1: Makkah, Al Azka, 12/01/2019 - 15/01/2019
  • ```
  • Stay 2: Madinah, Al Safa, 12/01/2019 - 15/01/2019
  • ```
```
``` 04/02/2019 ``` 04 : 15 PM ``` Mumbai
457123SUP 14 NightsDaily UmrahSuper SaverBom 04 Sup SV ```
    ```
  • Stay 1: Makkah, Al Azka, 12/01/2019 - 15/01/2019
  • ```
  • Stay 2: Madinah, Al Safa, 12/01/2019 - 15/01/2019
  • ```
```
``` 04/02/2019 ``` 04 : 15 PM ``` Mumbai
459123SUP 14 NightsDaily UmrahSuper SaverBom 04 Sup SV ```
    ```
  • Stay 1: Makkah, Al Azka, 12/01/2019 - 15/01/2019
  • ```
  • Stay 2: Madinah, Al Safa, 12/01/2019 - 15/01/2019
  • ```
```
``` 04/02/2019 ``` 04 : 15 PM ``` Mumbai
456153SUP 14 NightsDaily UmrahSuper SaverBom 04 Sup SV ```
    ```
  • Stay 1: Makkah, Al Azka, 12/01/2019 - 15/01/2019
  • ```
  • Stay 2: Madinah, Al Safa, 12/01/2019 - 15/01/2019
  • ```
```
``` 04/02/2019 ``` 04 : 15 PM ``` Mumbai
456153SUP 14 NightsDaily UmrahSuper SaverBom 04 Sup SV ```
    ```
  • Stay 1: Makkah, Al Azka, 12/01/2019 - 15/01/2019
  • ```
  • Stay 2: Madinah, Al Safa, 12/01/2019 - 15/01/2019
  • ```
  • Stay 3: Madinah, Al Safa, 12/01/2019 - 15/01/2019
  • ```
```
``` 04/02/2019 ``` 04 : 15 PM ``` Mumbai
```
```
``` ``` ```
```
```

```</div>

<script src="../js/jquery.dataTables.min.js"></script>
<script src="../js/dataTables.bootstrap.min.js"></script>

<script> $(document).on('show.bs.modal','#myModal', function () {
$('#example').DataTable({ autowidth:false,
responsive: { details: {
display: $.fn.dataTable.Responsive.display.modal( { header: function ( row ) {
var data = row.data(); return 'Details for '+data[0]+' '+data[1];
} } ),
renderer: $.fn.dataTable.Responsive.renderer.tableAll( { tableClass: 'table'
} ) }
} });
}) </script>

strip html from select input and get unique value

$
0
0

Hi Guys,

hope you can help!!

I have a datatable with select inputs on some columns. For one of my columns it has a specific link generated and embedded per row and displays the text as i have stripped the html i.e <a href="www.bbc.co.uk">Director</a>.

The issue that i am having is that if more than one row had Director it would appear twice in the select input. Whereas i need Director to only appear once.

example here http://live.datatables.net/xehimatu/294/edit

Many Thanks

Matt

Target li in responsive datatable

$
0
0

Hi, I am currently targeting columns in the main table view (not responsive) using the following rowCallback

"rowCallback": function (row, data) {
    checkInStash(exid, data.flavour_name, data.flavour_company_name).done(function(data){ 
        if(data == true) {
               $(row).addClass( 'instash' );
               $(row).find('td:eq(5)').html('<button class="btn btn-primary flavour-stash">Remove From Stash</button>');
                            
        } else {
            $(row).removeClass( 'instash' );
            $(row).find('td:eq(5)').html('<button class="btn btn-primary flavour-stash">Add To Stash</button>');
        }
});

How can I target the li of the responsive table to do the same thing?

You can see the table here: https://vccalc.vapingcommunity.co.uk/flavours

Thanks in advance


I am unable to install datatables using npm

$
0
0

i get the error below
C:\Windows\System32>npm install --save datatables.net-dt
npm WARN saveError ENOENT: no such file or directory, open 'C:\Windows\System32\package.json'
npm WARN enoent ENOENT: no such file or directory, open 'C:\Windows\System32\package.json'
npm WARN System32 No description
npm WARN System32 No repository field.
npm WARN System32 No README data
npm WARN System32 No license field.

  • datatables.net-dt@1.10.19
    updated 1 package and audited 2094 packages in 5.358s
    found 0 vulnerabilities

2 table droag and drop

$
0
0

Hi guys

Hope you are all well.

Hope you can help me with this again. Can i have 2 tables then from 1 table to another table drag and drop multiple selected records. Please help. thanks so much for always helping me.
Hope you all enjoy your christmas. be happy always.

DataTables-Editor-Server Method not found: System.String.Split

$
0
0

Hello

I require .NET Framework 4.5.1 for OWIN packages I am using.
Should DataTables-Editor-Server work with .NET Framework 4.5.1?

The Demo for .NET Framework 4.5 work perfectly.

I installed DataTables-Editor-Server in my projects via NuGet Package manager
When calling editor.Process(formData) I get the following error:

$exception {"Method not found: 'System.String[] System.String.Split(Char, System.StringSplitOptions)'."} System.MissingMethodException

Is there a way around this without changing the Framework to 4.5?

Search on column with collection of data

$
0
0

Say I have a column with a list of values:

[{'name': 'first name'}, {'name': 'another name'}]

So I know I can display these combining the underlying data. However, when I want to search for the name data, this becomes a bit more tricky. I was thinking of doing something like this: to modify the search:
https://datatables.net/examples/plug-ins/range_filtering.html

But how can I get the regex datatables is using? Any pointers to how this can be solved are greatly appreciated!

Inline edition event after editing

$
0
0

As the user change a field, I need another field to be updated.
It works well using a listener in the edition form:

$( 'input', editor.field( 'ds_pluv' ).node() ).on( 'change', function (e, d) {
if ( ! d || ! d.editor ) { // Used to be sure change is fired from the form (not inline editing)
editor.field( 'ds_cor_pluv' ).val(true);
}
} );

But when inline editing, this appears not to be working.
Is there any other way to be able to trigger a specific action after inline editing a cell ?

Xavier

Show a "working spinner" on pdfHtml5 during generation

$
0
0

Are there any callbacks to be notified when the PDF generation has started and ended? I have a table with 3,000+ rows and it takes a few moments for the PDF to start generation and the tab is frozen.

I'd like to show a spinner or some model to let the user know it is working.

    $(document).ready( function () {
        tableData.DataTable({
            buttons: [
                {
                    extend: 'pdfHtml5',
                    orientation: 'landscape',
                    pageSize: 'A4',
                    alignment: "center",
                    title: "{{report_name}}",
                    customize : function(doc) {
                                    //showWorking();

                        doc.pageMargins = [10, 10, 10,10 ];
                        doc.content[2].table.widths = Array(doc.content[2].table.body[0].length + 1).join('*').split('');
                    },
                }

            ],
            aLengthMenu: [
                [25, 50, 100, 200, -1],
                [25, 50, 100, 200, "All"]
            ],
            iDisplayLength: -1
        })
    } );

I found this from 2016 but I don't think it works. https://datatables.net/forums/discussion/33270/is-it-possible-to-show-a-spinner-while-a-pdf-is-created-with-pdfhtml5

Editor Layout - Multi-column layout and default layout on same page

$
0
0

Dear folks,
I have two editor on same page, editor-a having three fields and editor-b having more than 10 fields I want to use default layout for editor-a and Multi-column layout for editor-b.

Currently if I use below css it will apply on both editor, can you help me please how can I achieve this ?

div.DTE_Body div.DTE_Body_Content div.DTE_Field {
    width: 50%;
    padding: 5px 20px;
    box-sizing: border-box;
}
 
div.DTE_Body div.DTE_Form_Content {
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
}

Is the read only display field type editor plugin dynamic for EVERY row?.

Respecting data order by in datatable

$
0
0

Hi,

I have a dataset that is previously fetch by date order DESC, but when table shows up the order is ASC. Any idea why the order from the dataset is not respected ? If I use "order": [0, DESC] (0 being the Date column), I can't reorder anymore.

Thank you.

File uploaded to a field that does not have upload options configured

$
0
0

Hi, when I'm trying to upload a file I have an error: "File uploaded to a field that does not have upload options configured". Help me please

Controller:

public ActionResult JTovar()
        {
            var request = System.Web.HttpContext.Current.Request;
            var settings = Properties.Settings.Default;
            using (var db = new DataTables.Database(settings.Dbtype, settings.DbConnection))
            {
                var response = new Editor(db, "Tovar", "id")
                    .Model<ModelTovar>()
                    .Field(new Field("Tovar.id"))   
                                     
                    .MJoin(new MJoin("image")
                            .Link("Tovar.id", "interImage.idTovar")
                            .Link("image.id", "interImage.idImage")
                    .Model<MjoinImageTovar>()
                    .Field(
                       new Field("Tovar.Links")                                     
                           .Upload(
                           new Upload(request.PhysicalApplicationPath + @"uploads\__ID____EXTN__")
                           .Db("image", "id", new Dictionary<string, object>
                           {
                              {"fileName", Upload.DbType.FileName},
                              {"fileSize", Upload.DbType.FileSize},
                              {"webPath", Upload.DbType.WebPath},
                              {"systemPath", Upload.DbType.SystemPath}
                           })
                           .Validator(Validation.FileSize(50000000, "Max file size is 500000K."))
                           .Validator(Validation.FileExtensions(new[] { "jpg", "png", "gif","html","htm" }, "Please upload an image or html file."))
                                  )
                          .SetFormatter(Format.NullEmpty())
                            )                  
                          )
                    .Process(request)
                    .Data();
                return Json(response, JsonRequestBehavior.AllowGet);
            }
        }
{
                label: "Links:",
                name: "Tovar.Links",
                type: "uploadMany",
                display: function (id) {
                    return '<img src="' + editor.file('image', id).webPath + '"/>';
                },
                noImageText:'No image'
            }
------------------------------------------------------------------------------------------------------
{
             data: "Tovar.Links",
             render: function (data)
             {
                 console.log(data);
                 return data?             
                      data.length + ' files(s)' :
                       'No file';
             },
             title: "Image"
         }
--------------------------------------------------------------------------------------------------------

Models:

 public class MjoinImageTovar
    {
        public class interImage
        {
            public int id { get; set; }
            public int idTovar { get; set; }
            public int idImage { get; set; }

        }
        public class image
        {
            public int id { get; set; }
            public string fileName { get; set; }
            public int fileSize { get; set; }
            public string webPath { get; set; }
            public string systemPath { get; set; }
        }
    }
public class ModelTovar
    {
        public class Tovar
        {
            public int id { get; set; }         
            public string Links { get; set; }
           
        }

Edited by Allan Formatting using markdown.

Editor - Manipulate Client Table

$
0
0

Dear Allan,

long time back you answer this question that it will be available in 1.6,

Question from above link "

Is there a way to use the Editor controls on a client table only? I am looking to start my clients with a blank table. They are able to add new items, or remove or edit these items. This would all be done locally to the table. Then when complete, I would have a separate button to save the new contents of the table. I don't need to save the contents on the fly like the majority of examples I have seen - only once the table is finalized will it be save. Any help or examples would be appreciated."
I have same requirement but still I searched alot but not found any related solution, can you please help me on this ?
"
Best Regards

How can I style MessageTop/MessageBottom attribute in excel export ?

$
0
0

The messageTop data in my table is very length which is more than the table content width. So I want either increase the cell width or display message top in multiple lines in excel sheet.

Viewing all 81389 articles
Browse latest View live


<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>